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Media Temple web hosting delivers premium performance and 
support so that creative professionals and enterprises can 
focus on bold ideas, not web servers. 


mediatemple.net 


Welcome 


Welcome 
to the issue 


THE WEB DESIGNER MISSION. 


Be better at design 


hat makes a good web page/site/app 
design? It’s a pretty broad question but 
you can guarantee that it will include 
fonts, colour and layout. These are all 
essential components of the process and 
getting them right will go a long way to 
creating a design that works. 

This issue Web Designer has decided to 
bring together a swathe of tips, techniques and 
insight on fonts, type, colour and layout. It all kicks off 
on page 42 where we take a closer look at why you 
need to pick the right font, what a font portrays to 
the reader, the golden rules for picking font 
combinations and what is trending in the world of 
typography. UX/UI designer and Better Web Type 


author Matej Latin reveals his six steps to achieving 
meaningful typography. Then it’s on to colour. 
Discover what you need to know to get the perfect 
palette, how colour and accessibility should work 
together, the tools to help get the perfect colour 
scheme and what colours suggest to users. 

We take an in-depth look at the process of creating 
and designing layouts and how CSS Grid fits into the 
process. There is also a peek at what lies ahead for 
layouts. CSS Regions anyone? 

Do you want to build a HTML page in double 
quick? Of course you do. We reveal 10 of the best 
Static site generators to help make this happen. 

Plus, we have the usual collection of must-read 
tutorials and interviews. Enjoy. 


Follow us on Twitter for all the news & conversation 
Visit our blog for opinion, freebies & more 


Highlight 


Dataviz specialists in an information-driven 
world, FFunction make sense of information. 
Web Designer finds out more. Page 34 


Video Tuition - Over three hours of expert JavaScript video guides 
from Pluralsight (pluralsight.com) 


Assets 


- 150 Nostalgia Lightroom presets and Dot Grid Photoshop actions 


from Sparklestock (sparklestock.com) 
- Tutorial files and assets 


apt} 
|) www filesilo.co.uk/webdesigner 
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Contributors 
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This issue’s panel of experts 
Welcome to that bit of the mag where we learn more 
about the featured writers and contributors... 


Carl Cahill 

Carl is a creative who has 
been in the industy for over 
10 years with a passion for 
UID and has previously been 
awarded Creative of the Year. 
This issue Carl uses his 
knowledge to reveal how to 
pick the right font, the rules 
for combining fonts, how to 
choose the right colours and 
the tools and resources to 
help. Page 42 


Typography and colour are the minimum 
components you would expect to use to form a design 
and create content that has a distinct look and feel. 


Steven Roberts Mark Shufflebottom Matej Latin 


Steven is a multi-disciplined 
creative developer from 
Teesside. He’s been 
designing and building 
layouts for over 10 years. 

# This issue he'l be revealing 
how to create layouts with a 
practical focus on CSS Grid. 
Page 62 


Matej is the author of 

Better Web Typography for 
a Better Web and also the 
lead UX/UI designer at Auto 
Trader UK. This issue he 
unveils the six steps needed 
to create meaningful 
typography with some great 
examples. Page 46 


Mark is a Professor of 
Interaction Design at 
Sheridan College near 
Toronto. This issue he is 
exploring CSS4 variables 
and how they can help 
designers experiment 
further with their web 
designs. Page 70 


Simon Jones Leon Brown Luke Harrison 


wet) This issue Simon digs into 
ef the depths of his knowledge developer and trainer who 
to talk about static site assists web developers in 


f ik 
generators. They offer a ' ad creating efficient code for 
simple way to produce high projects. This issue he 
performance static pages recreates a host of 
for the web. Here he techniques as seen on the 


Leon is a freelance web Luke is a web developer 
from Sheffield, UK who is all 
about scalable & efficient 
front-end architecture. In 
this issue, he explores how 
you can automate your 
workflow with Node js 
powered task runner Gulp. 


Page 80 


chooses ten of the best out top-class sites seen in 
Z there. Page 74 Lightbox. Page 14 


Mark White Tam Hanna 


Mark White is Techiques eC Tam has a wealth of Follow us! 
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editor on sister mag experience in a breadth of 


= Photoshop Creative. He has different development Facebook: www.facebook.com/ 
been using Photoshop for langauges. This issue he 


that relies on vital features in — the module bundler webdesignermag 
Photoshop. Page 56 ‘ webpack. Page 86 


over ten years. This issue he take a closer look at how to WebDesignerUK 
¥ shows how to create an bring together TypeScript Twitter: https://twitter.com/ 
js impressive isometric design and React with the help fo 
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Are you 
looking fora 
new.adirection? 
it’s time to 
take_actionQ) 


Cc Inside issue 271 t t 


Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here's how to stay in touch... 
steve. jenkins@futurenet.com e @WebDesignerMag e www.creativeblog.com 


O8 Creative trends to watch out for 


Shutterstock recently released its 2018 Creative Cover focus 
Trends Report. Find out what's coming your way 
10 WebKit: The best musttry : 
resources out there 
Discover the libraries and frameworks that | , 
will make your site a better place to visit | 
11 Noexcuse for abad UI 
James Norman from Fasthosts tells you what i 
makes a good UI and why it’s important ! 
14 Lightbox | 
A showcase of inspirational sites and the 
techniques used to create them 
26 Angelic airplanes 
Russian agency Red Collar reveals how it 
delivered Inculerate's distinctive new design 
34 FormandFFunction 
Web Designer finds out how dataviz specialist \( | 1 
74 10Obeststatic site generators 
Want to build HTML pages in double-quick time? 
Then try one of these carefully selected options | 
92 Hosting listings 
An extensive list of web hosting companies. | 


FFunction makes data beautiful and engaging 
Pick the perfect host for your needs | | el 
94 Course listings 
Want to start learning online? Check out 
What courses are out there with this list | 7 . 
62 - 74 —— 
98 Nextmonth Master layouts 10 best static site generators 


What's in the next issue of Web Designer? How to design and create the perfect page Create HTML pages in double-quick time 


Get pro design skills 


Learn how pick the right font, create 


meaningful typography, pick the perfect 
palette and build brilliant layouts 


62 Master layouts | 
What makes a layout great? Discover the secrets 
behind designing and building what you need 


6 contents 


Visit the WEB DESIGNER online shopat 
[rey myfavouritemagazines 


| myfavouritemagazines.co.uk 
Get the latest must-have resources and videos a the latest issue back issues and specials 


e Over three hours of expert Javascript . 
Tutorials 


video guides from Pluralsight 
¢150 Nostalgia Lightroom presets 
¢ Dot grid Photoshop actions 


Never miss 
an issue 


Subscribe 


Turn to page 32 now 


Save 20 percent and get the 
magazine delivered to your door 


Code a dynamic SVG menu 
Use SVG, jQuery and the GSAP animation library to 
create an animated radial menu 


Design isometric typography 
Learn how to build a city of letters, using the Pen tool, 
selections and layers in Photoshop 


Shrink your CSS 
6 %, A Pa ove Use CSS4 variables to change a variable and every rule 

. oa a a fee a @ ’ that depends on it 

_ eS ss “se “tas 28 
66 a cooduser Web Workshop 
pues cdesign is Overlay graphics on video 
Characterised by project-redspace.com | 
aesthetics ease of use Create designs to complement video backgrounds 
andfunctionality #48 Multiple fade background colours 
COMMENT — James Norman — p11 _ rocka.co 


Code backgound colour changes on scroll 


Web Developer 


10 best Static Site Generators 
Discover the best options for creating HTML pages 
in double-quick time 


Automate your workflow 


Learn how to remove the nuisance of repetitive 
and mundane tasks with the help of Gulp 


Wire up TypeScript & React 


34 TypeScript makes coding easier, but deploying it with a 
ProFile: FFunction Lightbox. ane Wear framework can be a hassle. Webpack to the rescue 
Making data beautiful and engaging Dressing up eCommerce 
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Header The tools, trends and news to 
inspire your web projects 


STAT 
ATTACK 
MOBILE 


What are the creative _ srowsers 


trendstowatchfor? =". 


After proving pretty sage for 201/s hottest trends, the folks at 


Shutterstock forecast the year’s most influential visual styles Chrome 

eeing the future would be explains. So what are the trends set to turn Aside from growing popularity for ancient AQ iA % 

a gift most designers and heads in 2018 you may well ask? geometrics, tactile craft wares such as . 

influencers would die for. In Well topping the report are three major embroidery, plus any imagery for Popular on desktop, 

truth, the most talented are trends with “Fantasy” proving most cryptocurrency, Shutterstock reserve popular on mobile 
more perceptive than lucky and can gauge bankable, represented by a hunger for special mention for holographics. It might 
current climates or social tastes to engineer mythical characters, imagery and even be bringing up the rear at the report's arn ianet ah serane ices seen seers seaorcientnae i 
solutions tomorrow’s world will want to see. sprawling orchestral music too. Search position eleven but we recognise this one 


Web design innovators are no exception surges for “continuous line” and “neon particularly among the trends observed in Safa ri 

and tend to be most adept at tapping into 

visual moods and fashions, not totally Ti . h h % 

without insider help it seems. 66 Opping { e report are 4 ree IS 34 O 
Shutterstock recently released its 2018 Major trend S with “Fanta SY e 

Creative Trends Report which derives Popular choice on 


eleven styles by analysing billions of proving most bankable 99 Apple devices 


customer searches within the company’s 


vast repository of stock imagery. Paying circle’ styles place “New Minimalism’ in recent site picks. Shimmering talNDOW, ef 
most attention to those browsing habits of second spot before “Space” completes the prism-like colour palettes evoking the 
clients in the most influential trades such as trendiest trio to watch. While the latter's undeniable awe that holograms inspire UC Browser 
film, TV, media and advertising, recent popularity seems to reflect seem a good bet. If that wasn't enough of 
Shutterstock has some form when it comes box-office cinema releases such as Star an insider tip, the report also managed to 15 J6 % 
to calling out creative cool. “Our 2017 report Wars, other tips are more abstract forms link many of the selected trends to specific 
Was particularly accurate in its predictions, including the “Natural Luxury” of marbles countries. So what will be “rocking” our own : 
identifying trends like ‘Glitch’ early on,’ and crystal, candy-coloured “Punchy creative shores by next Xmas? Terrazzo Z eee stele 
Shutterstock’s Curator Robyn Lange Pastels” and, bizarrely, Cactus plants. apparently... Yeah, we'll let you know! eH i 
CREATIVE BLOQ | otcrrateprnc 
oI J DIGITAL EDITION Opera 
creativeblog.com Do you want to get your hands on ; 
; a digital edition of your favourite | 
aanaa Gee ue In-depth tutorials, web design magazine? Head to 5 J() 
sf AN PU arc PT SAP expert tips, ° 


: your preferred app store — Google 

ie cutting-edge Play (bit.ly/2wetvGp) or iTunes PONG OMilow: DOWEL 
@ row features, industry (apple.co/2igtBYq) — then smartphones 
oe interviews, download, install and purchase the 


jar how 00 Fier chee 
Spo aL inspiration and issue of choice from within the app. 


sure to get your 
Samsung I A 


5 new 30 ——o ILE ee - — x ‘ | daily dose of 
% 
5.49” 


Es a pa a re creativity, design 
and development. 
Popular mobile 
phone brand 


Source: gs.statcountercom 
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Inspiration 
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ons umabi.jp/njpw-keiba 


Japanese horse racing promo. 


> (= 01. New Japan Pro- 


O02. Portfolio of Kadir Inan 


uix.me 
Cologne-based UI/UX designer showcases 


talent with smoking WebGL effects. 


03. Dot Agency 

dot-agency.it 

Italian agency crowds out the white space 
here with oversized SVG rollovers. 


04. Daijima 

daijima.jp 

How to choreograph impressive 3D 
animation skills to music. 


@ @ 
Graphics Colour picker Typesetter WordPress 
Thunder Rockets Verdant Peninsula Decoral Glytch 
bit.ly/2EXDT6p http://bit.ly/2FStA4w bit.ly/2Djle4p bit.ly/2rrNuAt 
Brazilian illustrators Thunder Rockets bring Art Deco styling with a modern twist, So called for the “glitch” effects employed 
a wacky cartoonish style bursting with Hesryn Decoral by Lasko Dzurovski for Totem throughout, Glytch is a set of music-themed 
colour and packed full of charm. boasts 650 glyphs across three weights. homepage templates for selling sounds. 


#C4BEIE 
| 
#F3BCA7 
#E2DC6E J 
oe oe so ol 
#614D92 
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webkit 


FLAT Ui STARTUP 
Theme for Sorc 7 


*? toptal 


jQuery Tilted 


Page Scroll 


bit.ly/1jlj1t3 


Visual designer Pete R is known for his 


er ol Trawelistly o-4 BucketListly 


TRAVEL TO STOMEY, AUSTRALIA 
Completed on 14 Fee20t4 


Discover the must-try resources that 
Will make your site a better place 


Font pairing made simple 


plugin work and this one for adding a 
tilted page scroll effect to a page isa 
great example. Achieve an eye-catching 
3D effect that flips <section> elements 
up like a stack of cards. Compatible with 


Animate.css 

bit.ly/1qiVdjA 

Daniel Eden’s collection of “just-add- 
water CSS animations” can be used to 
add smooth motion effects and physics 


Fontjoy 

fontjoy.com 

Fontjoy is a web app that uses “deep 
learning” to grab Google fonts and 
generate complimentary combinations 


SVGMagic 

dirkgroenen.nl/SVGMagic 

This clever little plugin is a fallback that 
doesn’t employ magic but jQuery to find 
SVG elements within a website and swap 


modern browsers and smartphones. 


to page elements. 


you can customise. 


TOP 5 Web conferences - March 2018 


Get yourself a seat at the biggest and best conferences coming your way soon 


SALZBURG 
MARCH 3, 2018 


The herd deeelopoee on OO confenrace ie Auer 


.concat0 2018 


2018.conc.at 

Inviting the web dev and UX 
community to Salzberg, this 
one day event boasts 18 
industry speakers. 
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ngVikings 2018 


ngvikings.org 

This travelling Angular 
conference hits Helsinki 
Finland with a band of speakers 
including Google experts. 


resources 


SXSW 2018 


sxsw.com 

The world-famous Interactive, 
Film and Music conference and 
festival open its doors in Austin 
Texas with a packed schedule. 


UXIn The City 
bit.ly/2Dsd4Xs 

This community-led UX 
conference hosts keynote 
speakers Sarah Richards, Molly 
Watt and Chris Atherton. 


them for PNGs if unsupported. 


SLICE neti 24 March SOE! 


UX Camp 
Brighton 
bit.ly/2BoSUfm 

A smaller, more personal 
“barcamp’ event, that appeals 
to UX designers. 


Header 


There is no excuse 
for bad UI 


What makes a good User Interface and why is it important? 


pple devices are famous for their intuitive user interfaces and good design. The 
fact these two characteristics are so prevalent in their products is no accident. 
The late Steve Jobs was famous for his unflinching focus on good design, 
because he understood how critical design was to the user experience: 

“Most people make the mistake of thinking design is what it looks like. People 
think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That's 
not what we think design is. It’s not just what it looks like and feels like. Design is how it works.’ 


Having a good user interface means that a customer will Know intuitively how to use your 
website or app without too much help. By contrast, bad user interface design can leave a user 
abandoning their session frustrated with an empty cart. That’s why it’s so important to optimise a 
user interface design, and think about how your customers are interacting with your website. 

It is worth taking a step back to see how user interfaces have evolved, in order to understand 
why users have such high expectations for user interfaces today. 

User interfaces have grown from a textbased command-line interface (CLI), to a 
two-dimensional text-based user interface (TUI), and into the graphical user interface (GUI) in use 
today. Where CLI and TUI were only interacted with by keyboard, a GUI is controlled by a 
keyboard, mouse or, ever more commonly, a touchscreen device. 

Also growing in popularity are voice user interfaces CVUN) like Siri on Apple devices and 
Amazon's Alexa, where devices are controlled through speech. For web designers, the GUI 
remains the most logical interface to focus on, however interaction with the prevailing VUIs is 
something that should not be overlooked. 

A good user interface design is characterised by aesthetics, ease of use, and functionality. The 
design should be quite minimalistic. An overload of content, images and buttons can confuse 
users who will search unnecessarily around the screen trying to find the bit that is relevant to 
them. Remember to include whitespace to break up the content a bit. 

Make buttons and options easily recognisable by using existing icons. Think of classic user 
interface icons like the trash can - most computer savvy users would know what the trash can 
does. The same goes for the floppy-disk save icon. Even though a lot of the new internet- 


James Norman generation would never have seen a floppy disk in real life, they recognise that the floppy-disk 
Content editor icon is synonymous with saving. 
fasthosts.co.uk These icons haven't changed over time because they're so iconic and recognisable that users 


immediately know what they do, and that’s a fundamental of good user interface design. You 
a eee ea ee] want to make it intuitive. Users expect certain icons and will search for them, so there’s no use 
having a wacky, well-designed icon in place of a traditional, simple and effective one. 
You want to make the user interface as simple to use as you can, whilst still giving users all of 
the functionality they require. And of course you want it to look great. 


bE A good. User The bounce rates of your website can have an effect on your SEO (search engine optimisation). 
interface design 1S If someone lands on your site and bounces straight back because they're overwhelmed and cant 


figure out how to navigate, then that’s going to reflect on your bounce rates, which will affect your 


characterised by search rankings. This is particularly prevalent on mobile devices. 
th t t Make sure that your internal linking is intuitive and easy to follow for humans, because search 
aes C ICS, CdaSC O engine web crawlers will look at the internal navigation structure of your site and analyse its 
use, and functionality. effectiveness when deciding on your search ranking. 
As well as that, having a page cluttered with too much content or too many features can cause 
99 the page to load slower, which can also have an effect on search engine optimisation. 
Remember: design is how it works. Strike the right balance between form, functionality and 


content, and you'll deliver a smooth and intuitive user experience for your customers. Never 
forget Steve Jobs’ words; “Design is not just what it looks and feels like. Design is how it works.’ 
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webkit Discover the must-try resources that 
Will make your site a better place 


Devices.css 


Modem deviers im purr O56. The first acc Phone and iPhone 8, and more modem @evices arc coming 


iPhone x 


Devices.css 


picturepan2.github.io/devices.css —_ | mark.js+ 

Keen to render the very latest : < a a | — | JavaScript keyword highlighter 
smartphones and devices in nothing but ——— M oT a 
CSS? Well if so, Devices.css is a Github : . iat 

listed collection of gorgeously realised Bulma A-Frame mark.js 

new iPhones, Google Pixels, Samsung bulma.io aframe.io markjs.io 

Galaxy handsets and more. Asa Tipped for broad adoption in 2018, A-Frame is a library for creating WebVR Usable as a jQuery or pure JS plugin, 
lightweight testament to what inventive Bulma is an open source, mobile-first experiences from HTML-based worlds, mark.js is a flexible keyword highlighter 
HTML and minified stylesheets can CSS framework based on Flexbox that producing a 3D perspective from two for dynamically marking search terms 
achieve it’s worth a look. promises to be simple to learn and use. screens at multiple angles. within paragraphs of page text. 


TOP 5 WordPress themes for February 2018 


Shortcut your way to blogging brilliance with a handful of the hottest new themes 


TRAVELMA TIC 


Travelmatic Susastho Halena Esquise Ambesten 


travelmatic.purethe.me/ bit.ly/2F4CWJm http://bit.ly/2n6IgFK http://bit.ly/2rwXqsl MarketPlace 
Get Google Maps integration Susatho offers an elegant and Want to add a touch of Big, bold and beautiful. This bit.ly/2DyTKMv 

for plotting stop-off landmarks. clean design perfect for sophistication to your magazine theme will ensure Ambesten is a flexible 

This theme is ideal for ajourney | marketing yoga, health and eCommerce? Halena offers that your content stands out WooCommerce theme ideal 
with photos and stories. gym services. minimal & modern in abundance ! and will get seen. for responsive shop fronts. 
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The JavaScript ) 
Handbook | Bee vesigner € 
After completing the survey, won oa scoren? 
youll receive a digital copy of | “Da 
The JavaScript Handbook as 


as a thank you for cs 
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Jorcscupt 


again, wed like your 


need to do is answer 
very quick questions 


hearing from you. 


Steven Jenkins 
Editor 


improving Web Designer 
magazine, and all you 


about yourself - we're 
really looking forward to 


you male or temale? 


gang. ne eh 


| 
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help in 


some 


reader Oh 


ey 
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eader survey 2018 


Each and every issue, we do our best to create a 
magazine that you love to read, and were always 
looking for ways to make it even be 


tter. Once 


a 


= 
Millennials Are Screwed | §¢Mictael Hobbes and the 


Huffington Post presenta 
Designer: Gladeye — gladeye.com vibrant scrolling narrative on 
Development technologies WordPress, jQuery, Three js, HTML5 a SCary financial futur e 99 


lightbox 


TWITTER | FACEB K | SUBS( 


HLINE 


LightBox 
a Millennials Are Screwed 


Os abcABC abeABC | abcABC 
i = 1234567 1234567 | 1234567890 


Above Above 
The GT Walsheim font, by Noél Leu for Grilli Type, is used The Simplon BP Mono font, by Emmanuel Rey for b+p 


_————2 in Regular and Bold weights, plus Oblique forms. swiss typefaces, also styles the left side <div> text boxes. 


#E84CF5 #3059D6 


lightbox 


Understanding structural disadvantage is pretty 
complicated. You'll need a guide. 


LightBox 
Millennials Are Screwed 


Follow m@ as [ make my way 
LOWwaErO a Stable Tinancial 


TUTUra 


Above 
As the user scrolls, the site animates the ‘fall’ of a pixelated character called Becky, who represents millennials 


HUFFPOST Cf HIGHLINI TWITTER | FACKROOK | sumscmime [2 HUFFPOST Cd HIGHLINI 


THEY 
BROKE THE SAFETY 


NET 


Above Above 
Gladeye’s design incorporates eye-catching typography from Jason Wong, adding A myriad of image-based illustrations are also animated during scrolling, using 
real style to the headings punctuating the story frames and CSS transformations to implement 


16 lightbox 


LightBox 
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Create a scroll up panel 
to reveal more content 


Create an interactive content cover that fades to reveal page content in response to user scrolling 


1. Initiate HTML 
The first step is to define the HTML document. All of the 
document is contained within the HTML container, which 
consists of the head and body sections. While the head 
section is responsible for loading the external CSS and 
JavaScript resources, the body section will store the 
content created in step 2 

<!DOCTYPE html> 

<html> 

<head> 

<title>Scroll Fade</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

<script src="code.js"></script> 

</head> 

<body> 

kkk STEP 2 
</body> 
</html> 


2. Content definition 
The HTML content consists of a header and main 
section. The header section is responsible for the ‘cover’ 
content that will be displayed to initially cover the full 
screen. The following main section will be used to store 
content that will move into view after the user starts to 
scroll the page. 
<header> 
<img src="image.jpg” /> 
<h1>Once Upon a Time...</h1> 
</header> 
<main> 
<p>In a land far away...</p> 
</main> 


3. Scroll listener 
Create a new file called ‘code js. This JavaScript code 
must first wait for the page to load, upon which it will 
activate a page scroll event listener. When the user scrolls 
the page, a function will be triggered to search for the 
header section’s image, upon which some calculations 
will be performed to alter its size, positioning and opacity 
based on the current scroll position. 
window. addEventListener("load"”, function() 
{ 
window. addEventListener("scroll”, 
function() { 
var img = document.querySelector ("header 
img”) ; 
img.style.width = (100+(window. 
scrollY/2Q0))+"%" ; 


img.style.left = (@-(window. 
scrollY/5@))+"%" ; 

img.style.opacity = 1-(1/(window. 
innerHeight/window. scrollY)); 

D5 
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4. Body style 
Create a new file called ‘styles.css. The first part of the 
CSS sets the page to cover the full screen without any 
border spacing. This is achieved using the width and 
height attributes, along with margin and padding to 
eliminate any default spacing set by the browser. A black 
background and default font are also applied. 
html , body{ 
display: block; 
width: 100%; 
height: 100%; 
margin: Q; 
padding: Q; 
font-family: "Trebuchet MS”, Helvetica, 
sans-serif; 
background: #0QQ; 
3 


5. Main container 
The main content container is set to cover half of the 
available screen width. A minimum height of double the 
screen height is set to guarantee the ability to scroll, 
regardless of how much content is set. The auto settings 
in the margin attribute are used to centrally align the 
container so that the child content automatically appears 
in the middle of the screen. 
main{ 

width: 5%; 

min-height: 200%; 

font-size: 3em; 

color: #fff; 

margin: 1@em auto Q auto; 
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6. Header container 
The header container is set to display with relative 
positioning so that any child items can be positioned in 
relation to its location. Its height is set to match the 
screen height so that it covers the full space available. 
Hidden overflow is also applied to avoid excess cover 
content conflicting with the main content. 

header{ 

display: block; 


position: relative; 


height: 10Qvh; 
text-align: center; 
overflow: hidden; 
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7. Header’s heading 
The H1 element inside the header is set to have specific 
size, colour and shadow settings. Other unique settings 
can also be applied in this definition. The application of 
the text shadow helps to avoid any conflict in the 
background image where colours may be difficult for the 
user to distinguish the text from. 
header hi1{ 

font-size: 6em; 

color: #cQQ; 

margin-top: Q; 

text-shadow: 2px 2px #000 


KKK 


8. Header’s children 
Settings for all first level children of the header are set to 
Share properties. This approach avoids having to repeat 
settings for each unique item; keeping the CSS small and 
manageable. All children will used fixed positioning 
placed in the top-left corner. They will also have a width 
matching the header container, along with margining to 
centrally align them. 
header > * { 

position: fixed; 


top: Q; 

left: Q; 

margin: @ auto Q auto; 
width: 100%; 


In a land far away... 
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Men Women Community Support Account Bag | 07 


Product — The ultimate 
deep powder bib pants. 


The ultimate bib pants. 100% Community — Get to 
powder protection comes with a know where your 
kangaroo pocket. Made of recycled 


i products are being 
made 

In over twenty years of 
development since its founding in 
1995, our partner, Maxport has 
grown into... 
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The geometric sans serif font Circular by Laurenz Brunner The Druk Condensed Super font by Berton Hasebe is 
#0D738C #B6AEAB is employed in Book, Medium and Bold typefaces. employed for the span headings running down the page. 
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Open One 3L Shell Jacket 


The ultimate powder jacket 2.0. Made of 
recycled PET-bottles. 45K waterproofness. 


CHF439 


Above 
A highly bold catalogue, the site blends high-impact product photography with action shots against a clean minimal template 
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Zippers — Eight water Ethical production — 

resistant YKK zippers Made in Vietnam 

to keep you dry. under fair working 
conditions. 


Open One 3L. 

Shell Pants Colour #e@ @ 
Size 5S ML EL 

CHF369 Traditional retail CHFS8S Size guide 
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Select an item to access a JavaScript-based rotator for examining a 360-degree look at the available garment on hover 
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Create an animated 
Slant box border effect 


Create an effect for images and other types of content components that responds to user interaction 


ll 


1. HTML initiation 
The first step is to create the page document architecture 
from HTML. This consists of the HTML document 
definition, which holds the head and body sections. While 
the head section is used to load the external CSS file, the 
body section is used to store the HTML created in step 2. 
<!DOCTYPE html> 
<html> 
<head> 
<title>Hover Frame: Slant</title> 
<link rel="stylesheet” type="text/css” 
href="styles.css” /> 
</head> 
<body> 
*kk STEP 2 HERE 
</body> 
</html> 


2. Visible HTML 


The visible content consists of a series of containers 
using the ‘slant’ class. You can place any content inside 
these containers. This example uses an individual image 
for each example container. The HTML is designed to be 
kept to a minimum, without any unnecessary elements 
for formatting or embedded styling. 
<span class="slant”> 
<img src="imagel.jpg” /> 
</span> 
<span class="slant”> 
<img src="image2.jpg” /> 
</span> 
<span class="slant”> 
<img src="image3.jpg” /> 
</span> 


3. CSS initiation 


With the HTML now complete, create a new file called 
styles.css. The first definition in this file sets the HTML 
document and body container to display as a block with 
no margin or padding. This guarantees that the page will 
display without any visible border spacing. Optionally, you 
could add other properties, such as setting their 
min-height to 100%, meaning that the page is sized to fit 
the full screen. 
html , body{ 
display: block; 
margin: Q; 
padding: Q; 
} 


4. Container class 

The slant container is identified using the ‘slant’ class. 
This element uses relative positioning, along with an 
inline-block display mode to allow it to flow as a normal 


text item while having sizing-related properties if required. 


Overflow is hidden to support the feature created in 
steps 5 and 6. 
.Slant{ 
position: relative; 
display: inline-block; 
overflow: hidden; 


3 


5. Border slant 

The slanted border feature is made from a box element 
overlaying the content container. This is achieved using 
the ':before’ selector, which is used to define a virtual 
element inside CSS. This is set to be placed at the bottom 
of the slant container with a width and height that will 
cover enough space for the effect to work. 
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.Slant: : before{ 


mn 


content: : 
display: block; 
position: absolute; 
bottom: -3em; 
left: -2em; 
width: 150%; 
height: 6em; 

i; 


6. More border slant 
The border slant needs to match the page background 
colour for the effect to work. Additionally, the element 
needs to be rotated via the transform attribute so that it 
doesnt appear as a Straight line. Finally, a transition with a 
duration of one second is applied so that any changes to 
the rotation transform appear animated. 
.Slant: : before{ 

background: #fff; 

transform: rotate(8deg) ; 

transition: transform 1s; 
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7. Hovered slant 
The rotation is required to change when the slant is 
being hovered. This step sets the rotation angle when 
this occurs. The changes that occur will appear animated 
due to the previous step’s transition attribute. Changing 
the -8 to another number will alter the angle that the 
Slant rotates towards. 

.Slant:hover: :before{ 

transform: rotate(-8deg) ; 
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Drumroll presents a dynamic web 
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#9403B4 #D5154A The Azo Sans font, by Rui Abreu and available through Adobe Typekit, is used exclusively in Light, Regular and Bold 
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Create an interactive navigation 
controlled image caption 


Employ the power of attributes to tell your story with the help of captions 


1. Get started 


The first step is to define the document architecture that 
will be used to present the page content. This consists of 
a definition of the HTML document, which stores a head 
and body section. While the head section is used to load 
the JavaScript and CSS resources, the body section is 
used to store the content created in step 2 

<!DOCTYPE html> 

<html> 

<head> 

<title>Picture Caption Navigationr</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

<script type="text/javascript” src="code. 

js"></script> 

</head> 

<body> 

*kk STEP 2 HERE 
</body> 
</html> 


2. Body content 
The page content consists of two child containers; an 
article container that stores a navigation and a figure for 
Storing text corresponding to the navigation options. The 
navigation contains the interaction options, and each 
have a unique title attribute. The figure stores the caption 
text that corresponds to the equivalently positioned 
option located within the navigation container. 
<article data-theme> 
<nav id="mainNav”> 
<a href="#" title="Page 1”>Page 1</a> 
<a href="#" title="Page 2”>Page 2</a> 
<a href="#" title="Page 3”>Page 3</a> 
</nav> 
<figure> 
<figcaption>Caption 1</figcaption> 
<figcaption>Caption 2</figcaption> 
<figcaption>Caption 3</figcaption> 
</figure> 
</article> 
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3. JavaScript listening 
Create a new file called ‘code js. There’s a need to set the 
value of the article's ‘'data-ttheme’ attribute to match the 
navigation option being highlighted by the user. 
JavaScript will wait until the page has loaded, upon which 
it will find all of the navigation links in order to apply a 
‘mouseover’ event listener. This listener will update the 
article's ‘data-theme attribute to match the hovered 
navigation option’s title attribute. 
window. addEventListener("load”, function() 
a 
var nodes = document. 
querySelectorAll("[data-theme] nav > x”); 
for(var i=@; i<nodes.length; i+t+){ 
nodesLi].addEventListener("mouseover”, 
function(){ 
var container = document. 
querySelector("[data-theme]”) ; 
container.setAttribute("data-theme” , 
this.getAttribute("title”)); 
3); 
a; 
+); 


4. Article container 

Create a new file called ‘styles.css. The first definition of 
the CSS sets the size and positioning of the article 
container. The height is set using ‘min-height; allowing it 
to expand beyond this if it has additional content. Auto is 
used for the margin’s horizontal parameters to allow the 


browser to automatically position the article in the centre. 


The associated data-theme attribute sets the article to 
display as a table. 
articlef 
min-height: 2Qem; 
width: 5%; 
margin: @ auto Q auto; 


} 
[data-theme]{ display: table; } 


5. Article theme 
Using the ‘data-theme attribute, the child figure container 
and its captions are referenced for styling. The figure is 
Set to display as a table cell with relative positioning and 
background settings to display images centrally covering 
the full space. The captions are positioned out of view by 
default, with absolution positioning in relation to the 
parent figure. 
[data-theme] figure{ 
display: table-cell; 
position: relative; 


background-position: center center; 
background-size: cover; 
J 
[data-theme] figcaption{ 
position: absolute; 
background: red; 
top: -9999%; 
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6. Unique figure captions 
The unique display sections for the figure and its 
captions are defined in this step. When the JavaScript 
sets the article’s ‘data-theme attribute to the navigation 
title, this is able to trigger unique presentation rules 
within the CSS. These are used to set the figure’s 
background picture and move the associated caption to 
the desired position. 
[data-theme]{ display: table; } 
[data-theme="Page 1”] figure { background- 
image: url(imagel.jpg); } 
Ldata-theme="Page 1”] figcaption:nth- 
child(1){ top: 50%; left: 50%; } 
[data-theme="Page 2”] figure{ background- 
image: url(image2.jpg); } 
[data-theme="Page 2”] figcaption:nth- 
child(2){ top: 25%; left: 75%; } 
[data-theme="Page 3”] figure{ background- 
image: url(image3.jpg); } 
[data-theme="Page 3”] figcaption:nth- 
child@){. tops 1545. left:.25%...3 


7. Theme navigation 
The navigation container is also set to display as a table 
cell, with its links set as block items with a border. This 
results in links being stacked vertically within the 
navigation container - which is set to cover half of the 
parent article. Navigation links are set to appear with a 
darker background colour when hovered. 
[data-theme] nav{ 
display: table-cell; 
width: 50%; 
3 
[data-theme] nav af{ 
display: block; 
color: #0QQ; 
border: 1px solid; 
3 
[data-theme] nav a:hover{ 
background: rgba(0,9,@, .5); 
color: #fff; 
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WHEN SILICON VALLEY INVESTOR INCULERATE 
DEMAND A DISTINCTIVE NEW WEBSITE, THEY 
OPTED FOR THE IMAGINATION OF RUSSIAN 
AGENCY RED COLLAR T0 DELIVER AN IDEA FIT 
FOR GIVING ‘ANGEL ITS WINGS 
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INCUOULER® TE 


t’s fair to say the modern internet 
experience is dominated by a clutch 
of incredibly successful companies. 
Each has cleverly found a highly 
profitable niche within the online 
world to become clear leaders in areas 
of search, social media, eCommerce, 
video and more. These enduring brands, 
which we need not mention, very often 
rose out of the dotcom bubble in the late 


“BELIEVING THAT “GREATION STARTS WITH AN IDEA,” 
INCULERATE PRIDE THEMSELVES IN HELPING EXCITING 
STARTUPS 10 GROW AS QUICKLY AS POSSIBLE” 


1990s and swerved being burst on the 
rise to the top. They outlasted the tidal 
wave of lesser competitors by seeing the 
future and evolving accordingly to 
conquer rapidly shifting territories. 
However, none of them did it without 
cost, and an equally important driver to 
success is always money, inspiring those 
with big chequebooks to take a gamble. 
The website we're featuring this month 
relates directly to this, built to market a 
business that flashes the cash to fund 
the operations of fledging firms. An 
angel investment company based in 
Silicon Valley, California, Inculerate play 


https://inculerate.com 
by 


RED COLLAR 


http://redcollar.digital 
@redcollars 
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* a pivotal role in supporting promising 

~ new business ventures. Believing that 

~ “creation starts with an idea,’ Inculerate 
’ pride themselves in helping exciting 

’ startups to grow as quickly as possible, 
~ furthering innovation and hopefully in 

* turn making people’s life better. “They 

* came to our agency with a request to 

* create an impressive website that would 
- reflect their principles and ideology,” 

- begins the guys at commissioned 

- agency Red Collar. “The main basic 

- concept agreed quickly around this time 
- was the paper airplane, deciding 

- between us that the take-off theme 

. probably reflects an investment 

. company such as Inculerate the best.” If 
. the colour of said collar seems familiar, 
_ it’s because we profiled the Russian 

_ agency’s equally imaginative web work 
_ for car paint manufacturer Auto Repair 
_ Materials, back in issue 259. Thankfully 


PROJECT STATS 


PROJECT DURATION 


2 month 


PEOPLE INVOLVED 
5 


PEOPLE 


Creative Director 
Denis Lomov 


Producer 
Mikhail Serkov 
Designer 
Daria Lomova 


Junior Designer 
Anna Efremova 


Front-end Developer 
Anton Ustinov 
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DESIGNING FOR DREAMS 


“Every aspect of the website was 
about showing what the client 
wanted to communicate out into 
the world,’ revealed Red Collar’s 
Creative Director Denis Lomov. “So 
even every animation we created 
was done and chosen for a reason. 
For instance, all the texts appear 


INCULER“TE 


CREATION 
JITARTS 


though we are assured no amount of 
that particular product was used 
Goldfinger-style to makeup the star of 
this latest URL! Intrigued? Well read on 
to discover how the story of inculerate. 


“THE MAIN QUESTION WAS HOW TO EMPHASISE THAT THE 
COMPANY INVESTS IN ANY PERSON INDEPENDENTLY OF 
GENDER, NATIONALITY, SEXUAL IDENTITY” 


com ‘unfolded’ to launch an angelic 
website worthy of investment. 


TAKING FLIGHT 


If you don't already know them, Red 
Collar are an exciting digital agency 
from Voronezh, Russia, with a keen 
sense of the unique and innovative. 
Recognised by a passionate attitude and 
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on each screen with a movement 
that is reminiscent of how an idea 
comes to mind. We wanted to 
create a special atmosphere on the 
site so we paid considerable 
attention to all the animations and 
sounds. Such as the sound of 
rustling paper making the action 


melody helping to evoke the 


deep blue colour that was 


~ an impressive list of industry awards, the 
~ team insist on a principle of helping to 

~ make a client’s wishes come true. 

~ “Creative vision, technology and digital 

~ experience are the main principals of 

~ Our agency, so it’s important for us to 

’ stay ahead of market strategies, 

* technologies and creativity. Design and 
* front-end development are our strength 
* and so that’s why in every project you 

* Can see exclusive design and interesting 
- decisions of front-end development.” 


These guys love what they do and the 


- process of the work involved, and this 

- enthusiasm was undoubtedly what drew 
. Inculerate to a Soviet solution. “We 

. always start think about the main idea of 
. the website just after the contract is 

. signed,” begins Creative Director Denis 

_ Lomov when explaining perceptions of 


more immersive while making it 
more realistic, and the background 


feeling of importance around the 
moment when a dream is being 


launched. We chose gold anda 


intended to be representative of a 


boundless space for opportunities. 
We then created all the content 
ourselves from training and 
performing airplane folding 
gestures, buying blue cardboard, 
applying golden body paint and 
capturing more than 1,500 shots 
for stop-motion video.” 
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~ Inculerate’s requirements. “The main 

~ question was how to emphasise that the 
~ company invests in any person 

- independently of gender, nationality, 

~ sexual identity and so on. That was 

~ really important along with an insistence 
’ they didn’t want a classic investment 

’ website.” What followed was a gathering 
’ of Red Collar’s managers, designers and 
- front-end developers to establish what 

* that meant and brainstorm a 

- fundamental concept right away. 


“Lots of ideas came to our mind but 


- after a while we came up with an idea of 
- an airplane to represent the kinds of 

. startup businesses that Inculerate 

. support. The great thing here was that 

. the client absolutely trusted in us and 

_ were willing to let us create whatever 

_ we wanted.” 


So the core idea that underpins the 
finished site was established early and 
very much from all that initial creative 
brainstorming. This work in idea 
generation was however also informed 
by some competitor analysis that 
confirmed certain things that the client 
wanted to avoid. “We came through 
dozens of sites looking for good 
solutions,” confirms Lomov. “And after 
that we realised that all the investment 
websites are absolutely similar. Given 
that the client had already said they 
didn't want to have a classic investment 
website, we centred around the take-off 
theme most enthusiastically.” 

The freedom Red Collar had to pursue 
this direction was aided by an admirably 
loose reign from Inculerate, who 
encouraged the team to go its own way 
throughout the project. Such an open 
attitude was made even more refreshing 
given the long-distance proximity 
between client and agency - an 
international relationship that hasn't 
always been so trusting. “After the brief 
our Junior Designer made sketches and 
we showed them to our client,” 


continues Lomov. “It’s important to say 
that the company is from the USA and 
we're in Russia, but in spite of different 
state of mind we managed to establish a 
very good and trusting relationship. 
They trusted in our professionalism and 
let us create at our discretion. They liked 
our idea and so we started to implement 
sketches into a real website. On every 
stage of design and front-end 
development we presented what we did 
and the client was really excited.” 

That front-end work would involve 
some inventive animation work, with 
lots of attention paid to creating an 
atmosphere with the visuals and sound 
too. Visitors to the finished site today 
will immediately appreciate the 
dedication to an idea, the choice of 
colours and the stop-motion gestures all 
performed lovingly by the team. 


The front-end development of the site 
was all written in PixiJS with the images 
and animations etc rendered onto 
Canvas. This approach consciously 
ensures that the content is displayed 
using the fastest and most flexible 2D 
rendering of WebGL while ensuring 
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~ consistency across devices. “PixiJS 

~ allows us to make cross-platform sites 

~ that open on almost any device and 

~ browser, so the site is 100% optimised 

- for all these types of devices,” Lomov 

~ confirms. The main interaction with the 

’ site of course happens via an interactive 


- slider, dragging a point on the screen to 
- symbolise the ‘do-it-yourself’ effort 
- associated with a startup. This makes 


the whole site more like an interactive 


- story; in a few steps a paper plane is 

- folded and launched like a business. “We 
- have thought out all the details to make 
- the UI most effective,” says Lomov. 

- “When you hover the cursor to the start 
. point it sticks to the element like a 

. magnet because of a 60-pixel invisible 

. hover zone around the starting point. To 
. not confuse the user we created a 

. ‘running’ light spot on the guideline in 

. order to direct visitor’s interaction. The 

_ stop-motion shots automatically play 

_ thanks to TweenMax (GSAP) technology 
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ABOVE: No red collars and 


no trousers for a few 
members of the team 
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Red Collar Creative Director 
Denis Lomov offers an insight 
into a standout feature that says 
something broader about why 
the project was successful. 


“The main thing is an idea. The 
company has high humanistic 
goals and an innovative 


approach to startups searching. 


The site should clearly reflect 
the company’s activity and 
arouse real emotions.” 


and the frames don't just follow each 


most realistic effect and to create our 
own easing, so at the beginning frames 
nicely speed up to slow down in the end 
for better vividness. It’s this sense of 


“THE SERVER AUTOMATICALLY GENERATES, INSTALLS 


AND WORKS ON THE HTTP2 PROTOCOL’ 


BELOW: The hands 
animation is the work 


S @ of many frames 


30 design diary 


smoothness that we believe delivers a 
more realistic perception.” As far as the 
nuts and bolts underneath goes, the 
important back-end base and backbone 
of the site is in the platform where it’s 
located. The server automatically 
generates, installs and renews SSL 
certificates from letsencrypt.org and 
works on the http2 protocol, ensuring 
parallel, fast and secure loading of 
content. This also has implications for 
the general adaptiveness achieved, 


something that has already garnered the . 
_ proved to be now it’s out there live? 


site SOTD, WOTD and Mobile Site of the 


~ Week accolades by Awwwards and 
other. We used TweenMax to achieve the © 


~ PLANE SAILING 


~ When it comes down to talking about 

~ the site’s launch after just a two-month 

~ development time, the team are keen to 
’ remember what the project was always 
~ about. Gauging any reflective notion of 


AND RENEWS SSL CERTIFICATES FROM LETSENCRYPT.ORG . 


indeed Google. 


‘success’ on that basis then comes from 


~ how well it communicates the original 

’ message at its heart. “First of all this 

* project is a story about inspiration and 

~ searching for the right ideas. It’s about 

- people who want to change the life of 

» the whole world for the better, and that’s 
- what both investors and startups want. 

- The client promotes the most 

- humanistic ideas and doesn’t care about 
- gender, skin colour or confession of a 

. person, but only about the quality of 

. their idea.” A great and admirable 

. philosophy always, so what about the 

. idea at the site’s heart? How effective do 


the people behind it think that has 
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communicator, a place where people : 
with valuable ideas find their Angel . PAPER TRA 1S 


investor. The unusual concept of the site, 


the launching of a paper plane by a . As we all know, the period aftera | recognition and success, is any sustainability, the relevance of 
visitor, seems to reflect the spirit of the . site’s launch rarely puts a full kind of subsequent aftercare on design and technological 
company and the principles of kick- . stop on the project’s story. the cards? “The Inculerate solutions, and that’s why the 
starting a startup. It offers visitors to . Usually somebody, whether it’s website is self-sufficient, so it project’s going to be relevant 
record a soundless video where they . up to the client or the creator to doesn't have personal accounts and trending for years. But we 
would get out a message visually. If it is . undertake, will be concerned and things of that sort. Itisa continue to work with the client 
clear and impressive, Inculerate reaches 2 with marketing the final result promotional presence that - in fact we are already creating 
out and the cooperation starts. Similarly, ° and getting it out there to be doesn't really require any something innovative so rest 
all the components across the full > admired. In this instance, Red on-going support. In fact, we assured that a new digital bomb 
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who FFunction 


what Data visualization, 
data-rich design, information 
design, user interface, 
Infographics, UX, data portals, 
and interactive 


where 400 Atlantic #205, 
Montreal (QC) H2V 1A5, Canada 


web ffctn.com 


FORM 


Data is beautiful in the hands of FFunction. A dataviz specialist studio in an information-driven world, 
FFunction not only makes sense of the information space, but defines its parameters to communicate 
often complex ideas to an audience hungry for new experiences, Knowledge and insights 
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t was 2005, and FFunction’s founder, 

Sebastien Pierre, was feeling 

disillusioned with France. He had a 

Masters in software engineering and 
a bachelor degree in design and wanted 
to find a way to bring the two fields 
together in his career. 

“Where | come from, cross-disciplinary 
innovation is not that common,’ explains 
Sébastien. “France has a culture of 
excellence, but thinking out of the box 
and starting something new is unusual, 
almost to the point of being frowned 
upon. There, you go to the right school, 
get a job, pay your dues, move up the 
ladder, stay in your own lane. So, | came 
to Canada.’ 


After working in Montreal startups for a 
couple of years, he decided to start his 
own company. But he needed a graphic 
designer to work with, so he went to the 
graduate show of UQAM (Université du 
Québec a Montréal) to see if there were 
any contenders. “| saw one display that 
Was very strong; the designer had an 
innate understanding of tyoography and 
form, Sebastien continued. “Other people 
seemed to agree — there were no 
business cards left so | had to Google her 
name: Audree Lapierre.” 

Audrée also remembers this time 
vividly: “Funnily enough, when | graduated 
| had every intention of being a print 
designer. | was interested in aesthetics and 


Key Clients 


UNESCO Institute 
for Statistics 


Google 


Deloitte University 
Press 


Heifer International 
Children’s 


Investment Fund 
Foundation (CIFF) 
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decorative arts, abstract images, punchy 
colours and fine typography. | didn't know 
where | wanted to work, but | Knew | didnt 
want to work in advertising. | wanted to 
design to inform people, not to sell things. 
One day | got an email from a Frenchman 
who said he'd seen my work and wanted 
to talk. It was Sebastien.” 

After several discussions, Sebastien and 
Audree decided to set up shop, and rented 
a couple of desks in the corner of another 
company’s office in downtown Montreal. 
Audree explains: “This was before the 
Infographic Boom of 2010 and at that 
Stage most people didn't even know what 
data visualisation was. At that time, the mix 
of visual communication, data journalism, 
information, Ul and design were a very 
new way to get information across, and 
we spent a lot of time doing self-generated 
infographics and explaining to prospective 
clients why they would even want to 
publish their data in the first place.” 

A short time later, the studio moved to 
an industrial-zone/hipster-enclave called 
Mile-Ex, which has been FFunction’s home 
ever since. The studio itself is ina 
century-old brick building that has been 
converted into large open plan loft spaces. 

As a cata visualisation studio, Sebastien 
and Audree looked for a name for their 
new business that would encapsulate the 
kind of work they wanted to do. Sebastien 
explains how they named their business: 
“Being in a bilingual environment like 
Montreal adds an extra layer of complexity 
to choosing a name. | started with the 
name ‘Donneelicieuse’ which translated to 
‘Datalicious in English. But catalicious.com 


The name FFunction comes from the 
combination of form and function, 
which to me is what data 
visualisation is all about 


was taken by another company working 
in a parallel industry, and anyway, having 
different names in French and English 

Was not ideal. 

“Donneéelicieuse is still our legal name 
but we started trading as FFunction 
Shortly thereafter. The name FFunction 
comes from the combination of form and 
function, which to me is what data 
visualisation is all about. It was alSo a wink 
to fffound.com, which at that time was a 
Strictly invite-only magnet for graphic 
designers all over the world. The domain 
name ffunction.com wasn't available, iY 
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but we managed to get www ffctn.com, 
which gets rid of those pesky superfluous 
vowels. Who needs them anyway?” 

FFunction was doing information 
design before it was really a clearly 
understood component of 
communication. As such, locating clients 
Was difficult at first. “In the early days of 
the studio we created a bunch of 
self-generated projects for our portfolio, 
and presented at every conference that 
would have us, says Audree. “Once we 
had won a couple of awards and landed 
our first big clients — the Gates 
Foundation, National Geographic, Heifer 
International and Edelman all came to us 
quite early in FFunction’s journey — it was 
easier to maintain our momentum and 
attract new clients. | suppose the work 
began to speak for itself, and we carved 
out a serious niche in creating interactive 
data visualisations for UN agencies, major 
non-profits and corporations. 

“Because of the nature of our clients’ 
work and the layers of compliance that 
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Some of the 


FFunction team (L-R): 


Wim Bruyninckx (Art 
Director, Chloé-Eve 
Levasseur (Graphic 
Designer & UX 
Specialist). Rebecca 
Galloway (Marketing 
Director), Audrée 
Lapierre (Creative 


Director with Byron the 


dog, Sébastien Pierre 
(Director, Technical 
Lead), Jackie Smoak 


(Project Manager, Sam 
Dupras (Web Developer 


AGENCY 
BREAKDOWN 


Founder/CEO/ 
Technical Lead 


Creative 
Director 


Project 
Manager 
Director 


Art 
Director 


1 
1 Marketing 
1 


1 UX 
Designer 


3 Developers 


Dog (100 per cent 
certified Good Boy) 


FREELANCE: 


1 Data 
Journalist 


1 Studio 
Administrator 


Graphic 
Designers 


1 Translator 


they need to adhere to, we tend to 
respond to RFPs (Request for Proposal) 
as Our main business development 
method. | know a lot of studios dislike 
RFPs, but they have their advantages. 
One major plus is this: if the client has 
issued an RFP it means they have data, 
findings and a budget, and they’re ready 
to work. We are, however, very much 
against spec work, and have refused 
and lobbied against it on several 
occasions within the context of a 
procurement process. 

“Occasionally we do cold-call 
organisations that we would like to work 
with, but in general our approach is more 
about communicating FFunction’s work 
effectively than creating a sales funnel. We 
dont do the conference circuit so much 
these days, but we're active on social 
media, and both Sebastien and | 
occasionally write opinion pieces for 
design publications, like DesignEdge, 
Applied Arts and O'Reilly. It helps to stay 
relevant, | think.” 


The business case for working with a 
client can have many components. As 


FFunction doesnt generally do spec work, 


but how does it decide which clients to 
work with? Audree explains the studio's 
approach: “We have turned down projects 
because the timeline is too tight, or 
doesn't fit with the other projects already 
in our pipeline. Were a boutique agency 
and intend to remain that way. The upside 
of working at this scale is that one of the 
directors is always personally involved in 
any given project. Crucially, we stay 
connected to the workflow. The downside 
is that project planning can be kind of like 
a game of Tetris because our human 
resources are limited. 

“Historically we have also refused 
projects where our added value is 
minimal, like branding or website design 
or PowerPoint design. There are so many 
extremely competent branding agencies 
out there that should win those contracts 
instead. Why choose dataviz specialists 
for that?” 
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Were a 
boutique 
agency and 
intend to 
remain that 
way. The 
upside of 
working at 
this scale is 
that one of 
the directors 
is always 
personally 
involved in 
any given 
project 
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Audrée concludes: “And this is 
Somewhat delicate, but we've also 
turned down projects from clients whose 
business practices we disagree with in 
some fundamental way. Last year, for 
example, we were approached to do a 
project by a cigarette company. The 
budget was good, but the idea of having 
a cigarette manufacturer on our client 
roster alongside the Canadian Cancer 
Society? It doesn't look right, and it 
certainly doesnt feel right.” 

Often an agency or studio will become 
known for a certain type of work. For 
FFunction, its approach means its 
clients are looking to use their data to 
communicate their messages. Sebastien 
outlines one project that spoke to 
FFunction’s design sensibilities: “One of my 
favourite projects is still HP Earth Insights. 
It aoplied a Hewlett-Packard analytics 
platform to research provided by 
Conservation International, an NGO 
dedicated to the protection of the planet 
and its resources. FFunction’s role was to 


package data that charted fluctuating 
biodiversity in key national parks near 
the equator. HP Earth Insights contains 
everything | like about dataviz. There's 
an interesting scientific dataset, a 
data-driven narrative, free exploration 
that lets users make their own findings 
and gorgeous photos overlaid with 
simple, but rich charts.” 

With specialist design needs and client 
data that can be presented in many forms, 
the tools that FFunction uses are varied. 
“We tend to be early adopters of new tools 
and plugins,’ says Audrée. “There are new 
ones coming out all the time, and we like 
to give them a try. We draw user flows in 
OmniGraffle. Also, we use the Adobe suite 
a lot (naturally), and Sketch for user 
interfaces. We prototype using Invision 
and Craft, and the designers send their 
files to the devs via Zeplin. We also sketch 
on old-fashioned paper a lot.’ 

Sébastien also comments: “I think that 
good information design demands a 
certain level of customisation, which is 
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MAIZE SEED SYSTEM MAP 


Internal tool for organisation 


The Maize Seed System 
is an interactive map of 
the agricultural and 
trade network in sub- 
Saharan Africa. 

This data-driven 
application is used for 
sharing knowledge and 
identifying connections 
among system actors — 
such as seed suppliers, 
farmers, importers and 
policymakers — in order 
to better understand how 
to improve investments, 
programs, and interventions 
within the maize seed 
system as a whole. 

The need for a stronger 
and more impervious maize 
network is more pressing 
each year, as the effects of 
climate change become 
more evident worldwide. 

Across much of sub- 
Saharan Africa where maize 
is the most important staple 
crop, production is 
primarily rain-fed, which 
makes farmers vulnerable 
to food insecurity. 


Approximately 40 per cent 
of Africa’s maize crop 
suffers a loss in yield due 
to drought conditions, 
endangering the livelihoods 
of millions of smallholder 
farmers and several 
hundred million consumers. 

DAI, an International 
development company, is 
working with other agencies 
and organisations including 
USAID to establish a new 
climate-resilient maize 
initiative to help solve these 
problems. Mapping out the 
maize seed system as it 
currently stands is an 
important first step; the 
next will be using the 
information generated to 
identify the right solutions, 
and provide them. 


MAIZE SEED 


Right FFunction created a 
detailed map of the current 
maize seed system as a vital first 
step to improving supply 
reliability of maize 
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Below and opposite The offices of FFunction are clearly 
those of data obsessives. The precise separation of the 
plant life is no accident we think 
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why the notion of custom tools is very 
strong on the dev side of FFunction. 
Internally, we mostly use custom 
languages that transpile to JavaScript/ 
HTML/CSS and a custom set of libraries 
for component-based UI and animated, 
interactive data visualisation. Dataviz is a 
demanding field that pushes web 
browsers to their limits. If you want to 
Innovate, chances are there's no library 
out there that covers your needs — if 
you limit yourself to what’s already 
available, you'll need to compromise on 
your ideas and, at the end of the day, limit 
your technical abilities. 

“Were critical engineers; we believe in 
the value of a deep understanding of how 
technology works and the power of 
technology ownership. That is why we 
spend the time to create custom tools that 
give us the independence we need to 
preserve our creative freedom.’ 

How technology is developing and how 
this can be harnessed for creative 


applications is something FFunction is 
always keen to explore. Sebastien 
continues: “HTML/CSS/JavaScript are here 
to stay: they're the basic building blocks 
for the Web. But the ecosystem that sits 
on top of these core technologies is 
changing fast. Technologies like jQuery 
were a great option a few years back, but 
dont really cut it nowadays when 
visualisations have to be more than 
animated bar charts. 

“Libraries like D3 and React are 
currently the better options, but they 
wont cover all your needs. React is not 
very good at data visualisation as it has an 
overhead that is directly proportional to 
the number of data points youre 
mapping, and has a model! that is not 
optimal for animating elements. D3 is 
great for data visualisation in general, 
and mapping in particular, but lacks the 
structure required for larger applications 
or more complex visualisations that 
integrate interactive controls. 


since we 
started using 


Zeplin, the 
designers 
spend much 
less time 
reviewing the 
finished 
projects, as 
they're pretty 
much pixel- 
perfect from 
the get-go 
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“In our development kit, we designed 
primitives that scale well across this 
spectrum, from simple animated 
visualisations to complex data-driven 
components that interact with each other. 
We managed to strike this balance partly 
because we've used and learned from 
libraries such as D3, React and others, but 
also because our work has become more 
complex as the studio has grown.” 

As more information is now consumed 
on mobile devices, how does this impact 
FFunction’s approach to each project? 
“I've said this before: mobile dataviz is not 
just a desktop dataviz in miniature — it’s a 
different thing entirely,’ said Audreée. “I’ve 
tried lots of different tactics to create 
dataviz for mobile. Smaller devices force 
you to develop succinct data visualisations 
that get your points across cleanly. My two 
main strategies are to reduce the amount 
of information and use small multiples. 

“It's the ‘smallify or simplify approach. 
Small multiples (AKA trellis charts, lattice 
charts, grid charts, panel charts) are 
incredibly handy if you want to make 
dataviz that works equally well on mobile 
or desktop. It’s just a series of similar 
graphs or charts that use the same scale 
and axes, which allows for easy 
comparison. In the desktop version, they 
can sit next to each other, and in the 
mobile version you can stack them up. 
When he was still with NPR, Brian Boyer 
championed the notion of ‘small multiples 
on desktop, GIFS on your phone, which | 
think is also a Super good solution.” 

As the environment that FFunction 
works within is constantly shifting, what 
technologies are attracting its attention 
at the moment? Sébastien comments: 
“There's been a boom in tools that 
facilitate the design process, from the 
creation (Sketch, Figma, Webflow) to the 
collaboration and delivery (InVision, 
Zeplin). This all helps having a smoother 
flow of work while also increasing quality 
and efficiency. 

“For instance, since we started using 
Zeplin, the designers soend much less 
time reviewing the finished projects, as 
they're pretty much pixel-perfect from the 
get-go. On the other hand, there is a 
plethora of new cata-visualisation tools, 
but, for me, none of them strikes the right 
balance of creative freedom and 
sufficiently powerful data manipulation 
features. It’s really difficult, because you 
dont want something overly simplified like 
a data-driven Illustrator, but you dont want 
something that only Computer Science 
majors would be able to use. I’m looking 
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Above Samuel Dupras (developer), Chloé-Eve Levasseur 
(UX specialist) and Audrée Lapierre (creative directorand ~~ 
co-founder) discuss their latest project 


forward to using D3 Express and see if it 
fulfils its promise of a more interactive and 
creative way of designing (and coding) 
data visualisation.” 

With a specific approach to each 
project, how has FFunction approached 
its recruitment? Audree explains: “Most 
FFunction’s employees come from 
multidisciplinary backgrounds. We have 
a developer with a background in 
education and design. A marketing 
director with an art history degree. An 
art director with a Masters in engineering. 
Our project manager has a chemistry 
degree (and, incidentally, is also a 
certified yoga teacher). 

“We look for smart people with a rich 
knowledge base who can look at a 
problem from several angles and find the 
most creative, functional solution. We also 
want to maintain our commitment to the 
advancement of women from coding to 
leadership, So we make sure the 
composition of the team is at least 50 per 
cent women. We also hire for team culture 
fit, we want people who are interested in 
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staying current in terms of their outlook 
and skill set. And we want people that 
were happy to eat lunch with every day 
too! It's a small, close-knit team, and 
there’s no room at FFunction for big 
egos or jerks. 

“In terms of design positions, we never 
hire pure information designers. We hire 
graphic designers with a passion for 
information design. This is an important 
distinction because employees need to 
be able to work on a wide spectrum of 
projects and we always need the ‘form’ as 
well as the ‘function. Honestly a lot of 
people who specialise in information 
design simply don't have strong aesthetic 
Skills, or don't understand typography.’ 

And Audree advises: “My advice to 
designers looking for work is this: design a 
super tight CV, and publish new work 
regularly. Create interesting side projects 


that show off your skills and interest areas.” 


The future will increasingly become 
even more data driven. For FFunction this 
means a landscape it can shape. “We're 
actually in a very exciting phase right 


now, Audree concludes. “FFunction is 
launching its first product; a project 
planning tool called Min. We're developing 
this software because, honestly, we've 
tried just about every project 
management tool on the market, and 
none of them were that great at servicing 
the needs of an agency. 

“Min will allow the user to quickly make 
a project timeline and track budgets, 
projects and resources. But | think the 
clincher is this: Min auto-calculates the 
best delivery dates based on your task 
dependencies and current team 
availability. | always wished that we had 
that capability at our fingertips when 
planning client projects, it would have 
been so useful. 

“The response so far to Min has been 
extremely enthusiastic: we've signed up 
more than 600 people for early access to 
the beta without doing any advertising. 
That tells us that other people are feeling 
just as frustrated with the current tools on 
the market as we are and there is demand 
for this combination of features. 
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ffctn.com 


FOUNDER 
Sébastien Pierre and Audrée Lapierre 


YEAR FOUNDED 
2008 


CURRENT EMPLOYEES 
9 (in house) 


LOCATION 
Montreal, Canada 


SERVICES 
Interactive data visualisation 
Data-driven applications and portals 
Infographics 
Data-rich reports 


Motion design 


“FFunction will still remain FFunction; 
were not planning on phasing out any our igre alae 
service offerings or pivoting into a product impact deforestation is 
company. Interactive dataviz is what we're having on wildlife is 

; bought to life with 
most well-known for and there is still a engaging images and 
high demand for it. But there is another dataviz design 
area of our work that has been growing 
almost exponentially over the last four 
years: UX for large-scale data-driven 
applications. Going forward, | can see 
that becoming a very core part of what 
FFunction has to offer.” 

The need to understand the increasing 
quantities of data being generated by 
businesses has always been important. 
Data has now become a highly valuable 
currency. Studios like FFunction help 
businesses and organisations make sense 
of the shifting sea of information to clearly 
communicate their messages. And these 
messages can be designed to not only 
deliver their insights, but also illustrate 
how beautiful that information can be. 

As information denizens, the creatives 
at FFunction are on the cutting-edge 
of digital design. 
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GET PRO DESIGN SKILLS 
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Typography and colour are the minimum 
components you would expect to use to form a 
design and create content that has a distinct look 
and feel. The wide range of typography and 
colour available to us enables any creative to 
design with a personality in mind for a brand or 


feature 


project. The way we compose our designs with 
textual matter hasn't evolved a great deal but the 
resources and trends we use and follow do. 

The perfect combination of colour and 
typography comes from understanding the visual 
and tonal direction of a brand or message. 


GET PRO DESIGN SKILLS 


rUNTS nt | ti ORAPH | Select the right font to get on the path to great typography 


PICKING THE RIGHT FONT 


There are a few things to consider 
when choosing a font and it has a 
great deal to do with personality. 


Before starting a project, it’s good to 


think about values and words that 
describe the feeling of what youre 


creating. They can be anything! For 


example; is the design going to be 
friendly, intelligent or confident? By 


WHAT DOES A FONT SAY? 


So we briefly mentioned visual and tonal 
direction earlier. Visual is very much the 
font and how tt looks, whilst tonal is the 
arrangement of words to form a 
message — both of which need to 
harmonise and be sympathetic to each 
other. Use the values you decided earlier 
to understand what a font truly says and 
how a message looks when you 
compare it to what is written. The right 
font can amplify words in this way so 
the visual characteristics of a font are 
important to make the relationship work. 
Some of the characteristics to look out 
for are weights, roundness, length and 
how they flow from letter to letter. You 
might be torn between Serif, San-Serif, 
Script or even hand-drawn styles. Each 
personality of a font will help evoke a 
feeling or message. 


FONTS TO TYPOGRAPHY 


A font or typeset becomes 
typography when the written matter 
becomes a visual component. You 
have written a message in your 
chosen font and it looks and reads just 
the way you want it to. Typography 
will also be a combination or 
composition of more words or 
phrases. This could include more 

than one font whereby you have key 
headline and body text fonts. It’s more 
common to use characterful fonts for 
headlines and keep cleaner fonts for 
body text. 

The mix between styles for 
typography is fine but there's always a 
limit, So never overcook all of your 
favourite fonts. Some work well 
together and a healthy contrast can 
work well too. For example you may 
have a nice large Serif font headline 


another important factor with web- 
Safe fonts lies in their performance. 

Using a font online can be done in a 
number of ways. You can upload your 
font to a server and link to that font in 
your CSS. This is perfectly fine but 
always be cautious of font licensing 
and whether a heavy font file loads 
quickly. Using a font library such as 
Google Fonts or Adobe Typekit 
ensures that everything is taken care 
of and you can expect better 
performance. A font hosted with these 
guys are likely to be faster in most 
cases. It's good to always make sure 
that you're only loading the character 
set you need too. There's no point 
using all the available weights if you 
dont need them. The good news is 
that there’s no need to use Arial or 
Verdana any more! 


with a clean Sans-Serif font for body 
text. Experiment with scale to see 
What works on your Canvas. 


IS YOUR FONT WEB SAFE? 


It's always worth making sure that 
your chosen font is web safe and can 
be rendered perfectly on a browser. 
Most fonts are these days, using a 
good font library or a web-safe font file 
(OTF or WOFF). This is all good but 


limiting these values, say to three or 
five, we can start to get a sense of a 
direction that our chosen font needs 
to relate to. So a friendly font might be 
one that’s nice, round and really 
legible. Confident might be angular, 
perhaps full caps? 

This might be sucking eggs but 
running this type of exercise can help 
you focus your decision and so 
choose the right font. 


The Quick 


BROWN FOX 


| iP 4 1 HULS y A must-have collection of resources to enhance your designs 


CANVA FONT FONTS COM 
COMBINATIONS mae 


bit.ly/2rfTqfU 
A great resource if you want your 


project to be more individual and 
unique. Font libraries like Google 
Fonts and Adobe Typekit are 
always great, but you can count 
on your chosen fonts being used 
by others too. The wonderful 
thing about Fonts.com is that you 
can browse through a larger 
portfolio of fonts and see how 
they are being used by the font 
authors. It’s again a great 
inspiration resource, especially 
for the personal and unique. 


Canva is a useful tool if you want 
to simply see font pairings and 
get some inspiration. Select your 
starter font and see where it 
takes you, providing you witha 
list of useful ideas of great font 
pairings. A great advantage of 
this tool is seeing the pairing in 
situ with live examples. Although 
the font listing is not huge, you 
can count on every font being 
web safe and is a great starting 
point for inspiration. 
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10 GOLDEN RULES 


F() : k (} \ t | | | ! (j F() NTS Bringing together compatible 
fonts is essential for great designs 


SIZE MATTERS 


The quick brown fox 


jumps over the lazy dog 


PROXIMA NOVA 


adobe.ly/1k4Zr4S 


FREIGHT TEXT 


adobe.ly/2DhOexG 
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STYLE GONSISTENCY 


If you decide to use uppercase or letter spacing for your 
headlines, don’t deviate and ensure the other style changes 
you make are followed. 


COMPLIMENT YOUR FONT PAIRING 


Don’t go mad with fonts, pick a couple that work together and 
set the tone and mood you want to portray. Contrasting fonts 
tend to work but be careful of readability and scale. 


UNDERSTAND CONTEXT 


Where is your typography being displayed and who is going to 
read it? The right visual direction and tone is important when it 
comes to making your messages readable and relatable. 


DON'T BE AFRAID OF SPACE 


Clarity and breathing space is important when making a 
message noticeable. Don’t make textual elements fight each 
other in a tight space. Nobody wins. Space helps keep focus. 


It’s important there’s not a huge variety of text sizes on a page. 
Consistency, hierarchy and readability are key. Ensure your 
fonts follow set size rules and don’t vary. Stick to a pattern. 


The quick brown fox 


jumps over the lazy dog 


MRS EAVES XL 


adobe.ly/2rdMDmz 


OPEN SANS 


adobe.ly/2D86IMU 
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APPLY COLOUR WITH ACCESSIBILITY IN MIND 


Legibility is essential when choosing a colour for typography. 
Contrasting colours are best, but be mindful of accessibility. A 
resource to check is WebAIM Color Contrast Checker. 


MIX YOUR STYLES 


Use contrasting styles/fonts like Sans-Serif and Serif, to achieve 
more varied looks. Sizing and hierarchy is very important but 
the difference in styles can make a big difference. 


WATCH YOUR WEIGHT 


Most fonts come in variety of options and weights. Don't 
deviate from ‘normal’ on body text, keep text readable. Don't 
use too many weigNts, reserve for your headlines. 


MAKE USE OF FONT FAMILIES 


When pairing with other fonts, you can use variations from 
families but be mindful not to overuse. Use one or two 
weights to add variety and hierarchy. 


~ PLAY AROUND 


It’s good to find font pairings you like that you stick to, but with 
the amount of fonts out there to experiment with, it’s always 
worth having a play with new and interesting fonts. 


Type 


The quick brown fox The quick brown fox 
jumps over the lazy dog § jumps over the lazy dog 


ALTERNATE GOTHIC PLAYFAIR DISPLAY 


| adobe.ly/2rhkNGr | bit.ly/2j4b4eL 


ROBOTO ALICE 


typekit.com/fonts/roboto bit.ly/2DBIlvR4 


WHAT'S TRENDING TODAY Meee 222, corer 


GROP AND GUT TYPE NEGATIVE SPACE 


On the same lines of creating interest Mostly using artwork within your 
and making typography unique, typography creates negative space. 
simply crop or cut letters up within a This is a wonderful way of really 
word. Make sure it’s enough that the integrating artwork within your 
letters are still readable. There’s a really typography and making your text 
interesting neuro behaviour that Stand out. A great technique when 


There are a number of different 
treatments and trends that you can 
apply to typography in order to 
better tell your stories. Generally, 
making your typography more 
integrated into your design is a 
good start and less about a 
headline plonked onto the canvas. 

Here are some examples of 
typographical treatments to try 
and look out for: 


TYPOGRAPHY CHAOS 


readers can still identify letters within using negative space is it enable 
words, even if characters are missing. graphical elements to pop out of the 
Take Hangman for example. 


type, creating a dimensional space. 


GRAPHICAL TYPE 


Typography can be a little flat so 


This trend is still going and enables 
you to be a bit more chaotic with your 
composition of typography. Splitting 
words and even letters around the 
Canvas can offer a really interesting 
look. In some cases, the 
unconventional arrangement can test 
the readers with curiosity. 


enhancing your typography 
graphically makes and textual 
elements stronger on the page. It 
might be that your typography is 
made furry or even paint like. The 
objective here is to make your 
typography more like an object as 
opposed to a character. 
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HEOUURLED 


GOOGLE WEB DESIGNER 


bit.ly/2DCT2uk 


Best used for creating Google Ads 
but also a neat little tool to create 
dynamic displays whereby you can 
animate textual elements. 


SLIDER REVOLUTION 


bit.ly/2ZavbF9a 


If you're developing in WordPress, 
this slider plugin is incredible for 
creating custom sliders with very 
little limitations. Using the timeline 
and various animation styles, your 
typography can really make an 
impact on the page. You can work 
with numerous layers and 
integrate your graphics too. A truly 
smart way of bring more life to 
your web projects. 


ADOBE ANIMATE CC 


adobe.ly/2rb71Vs 


If you havent dipped into this yet, 
it's worth doing and not being put 
off the association with Flash. You 
can export HTML5 canvases and 
achieve a higher level of animation. 
When it comes to typography and 
more complex graphic directions, 
Adobe Animate will helo you out. 
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READ THE CONTENT 


Meaningful typography 

starts with one thing — 
the content. Typographers know 
this since they'll always read the 
book before they start type- 
setting for it. Unfortunately, it 
seems that many web designers 
underestimate the importance of 
content in a web design process. 
They will often find excuses in 
the fact that the website doesn’t 
exist yet so there’s no content to 
work with. When that’s the case, 
use content that is similar. If 
you're designing a website 
about finance and economics, 
for example, find an article 
about that and read it. 


2ISUEPENSDENT = 


ity 


CHOOSE A TYPEFAGE 
BASED ON CONTENT 


Now you have read the 
content, you're ready to choose 
your main typeface. If a website 
is about technology, but is 
expected to have medium to long 
articles, use a typeface that looks 
a bit modern but is easy to read. 
If it’s an art gallery portfolio, you 
can get away with something 
edgy. Don’t use Lorem Ipsum as 
placeholder text — it’s a strange 
form of the Latin language that 
has nothing to do with your 
website. Use the content from 
Step 1, in the language that 
will be used, and then design 
around that. 


Bayeux Tapestry: Emmanuel Macron 
reportedly agrees to loan historic Battle 
of Hastings memorial to Britain 


Reyne Ad Ye) 


The Independent benefits from a bespoke typeface, Indy Serif, which 
seems very capable at delivering any type of news content on any 
medium. Well-shaped paragraphs offer a great reading experience. 
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START MOBILE-FIRST 


An important step is to 

design the best reading 
experience for the screen that’s 
hardest to design for — mobile. 
Mobile-first is a fundamentally 
different approach to web design 
where progressive enhancement 
is favourable to graceful 
degradation. Don't design the 
best reading experience for 
desktop screens and then adapt 
for mobile or, even worse, forget 
about mobile altogether. Choose 
a combination of font size and 
line height that works best on 
smaller screens. Your starting 
point should be the agreed-on 
browser default of 16 pixels. 


| ADAPT FOR 
LARGE SCREENS 
7 - Don't let mobile-first 


turn into mobile-only. The tools 
for shaping the best reading 
experiences for different screens 
are in place and they should be 
used. Larger screens are usually 
further away from reader’s eyes 


so the base font size needs to be 
larger. 18 pixels is widely 
considered a good starting point. 
Don’t forget to limit the width of 
paragraphs — recommended for 
best reading experiences is up to 
60 characters per line. The line 
height needs to be looked at 
again — 1.4 or 1.5 times the font 
size is usually best. 


Wired comes with a typeface designed for web usage (Exchange 
Web) and neatly designed reading experiences for both, mobile (17 
pixels and 1.3 line height) and desktop (19 pixels and 1.4 line height). 


USE A SCALE 


It’s now time to define a 

range of reusable font 
sizes based ona scale and the 
most common way to do that is 
to use a modular scale. Go to 
modularscale.com, enter your 
base font size and choose a scale. 
It will give you a range of font 
sizes to choose from. Defining a 
scale and trying to stick to it adds 
meaning to font size choices and 
prevents the chaos that often 
arises from randomly assigning 
them instead. 


SET A BASELINE GRID 


The next step is to start 

thinking about other 
text elements around the body 
text you should have designed 
by now. Titles, lists, captions, side 
comments, etc. To add meaning 
behind placing these elements 
on your website, it’s best to use a 
baseline grid. This grid originates 
from your body text line height. If 
your line height is 22 pixels, you 
need a vertical grid based on 
that. When that is in place, you’re 
ready to set the sizes and 
margins of other text elements 
so they'll fit inside this grid. 


Lead UX/UI Designer at 
Auto Trader UK 


matejlatin.co.uk 


@matejlatin 


The Economist comes with generously sized body text, topped with 
a crisp, slightly lighter typeface — Milo Serif Pro. Mobile-dedicated 
font size and line height help improve the reading experience. 
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The Great Discontent uses Leitura News for its body text. Its 
unique style complements the type of content (interviews) very 
well. A large base size makes the content very easy to read. 


Cicrie peur porth be becoming a dewigrecr ane (Dost raicer 

ae hr ther onhy thing bane thought ld Ae bid, | cew all je a kicl, i drew all 
the tinte anid my 

grandma embraced 

that early on 

because she was an 

oil painter. We were 
the only artists in 
Ur VeErV sport %. 


onented family 
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GOLOUR & 
ACGESSIBILITY 


Colour and accessibility are key 
things to be mindful of, but are too 
often forgotten about by designers. 
You may be designing something 
on your nice shiny iMac with an 
incredibly glossy Retina display but 
not everyone will have one of 
those. Screens render colours 
differently and you can count on 
older screens having a harder time 
telling the difference between 
closely matched colours. 

Not only that, you have 
accessibility considerations 
whereby the viewer may have eye 


Sight difficulties or colour blindness. 
Contrast will always save you here 
and there are many good guides 
to avoid these issues. 

Check out Web AIM (Web 
Accessibility in Mind) to see how 
your chosen colours rate within the 
AA and AAA web standards. 


SCREENS RENDER 
COLOURS 
DIFFERENTLY AND 
YOU CAN COUNT 
ON OLDER 
SCREENS HAVING 
A HARDER TIME 
TELLING THE 
DIFFERENCE 
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CHOOSING COLOURS Five steps to the perfect palette 


BEST FIT 


Colours can be very 
Subjective but are 
nevertheless important when it comes 
to look and feel. The personality of 
your project still has a complete hold 
of the colours you choose. The first 
step would again be to think about 
your values and what colours best fit. 

It's best to acknowledge colour 
psychology before you start picking 
any colour. This is because you can 
really influence human behaviour and 
perceptions of what is being seen by 
the colour used — take warm and cold 
colours, for example. Although 
obvious, we have the ability to control 
a reader's feelings and behaviour just 
by the colours we use. 


LESS IS MORE 


As with text, hierarchy is 
important. Having some 
ground rules for colour usage 
prevents your artwork looking like a 
pack of fruit pastilles. Think about 
primary, secondary and even tertiary 
colours that can be used. There's no 
real limit to how many colours you 
can use but less is often more. 
Knowing how many colours 

youre planning to use, will help 
maintain consistency. 


It’s common for more corporate- 
related designs to have less colours 
than something perhaps more friendly. 

Another thing to be very mindful of 
is reserving a single colour for your 
call-to-actions and buttons. It’s a good 
idea to single out a colour so that links 
and buttons are more individual and 
user-friendly. 


CHOOSING COLOURS 


Let’s start by choosing 
/colours since we now know 
the personality and hierarchy. You can 
use a tool like Adobe Color CC to play 
around with your colour choices. This 
tool is simply a colour wheel that gives 
you the freedom to select and find 
colour palettes. 

Focus on your primary colour first 
and play with the rules that Adobe 
Gives you if you want help finding 
other colours. These calculated rules 
are a useful headstart but not 
restrictive. Once you have selected 
your primary colour, work through 
Selecting your other colours. 
Remember accessibility and contrast 
in your options. 


SHADES OF COLOUR 


| Once you have selected 
your colours, there's a few 


more things to think about. Lightness 
and darkness will be one. Although 
you have your chosen colours, there 
are no rules to restrict you from using 
lighter or darker versions. For example, 
we may have a bright blue as our 
primary colour and we are using it for 
some of our foreground content. We 
could darken the same blue (with a 
Shade of black) for a treatment in the 
background. Be mindful of consistency 
and not create too many variations of 
your colours, but this method will 
Steer you clear of the fruit pastilles and 
help with creating contrasting colours 
based on your own palette. 


TEST AND TRY 


Apply, play and change if 
necessary. It’s only when 
using everything in context that you 
can truly gauge if your design is 
working. Look back over your values 
since this will help validate whether 
your creation works. 

Create a number of versions and 
try new arrangements of colour. 
There's never a single right answer to 
any creative project and the process 
of experimenting is fun. If you have 
options and a history of experiments, 
it’s easier to see how your design has 
progressed and evolved. 


ESSENTIAL RESOURCES Make sure to get your colour right 


ADOBE GOLOR CC 


adobe.ly/2wLilqq 


Adobe provides a range of rules 
that will help discover closely 
matched colours from selecting a 
primary colour. If you work with 
Adobe products, save your 
palette to a library to get rid of 


copying and pasting. 
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COLBLINDOR 


bit.ly/1qSSJSu 


A great tool to check your design 
against colour blindness. You can 
safely upload your artwork and 
get a feeling of how it is to have a 
colour vision handicap. 


B Colblindor 


Soenas 


Coblis — 
Color Blindness Simulator beeen 


a resco 2 


WEB AIM COLOUR 
CONTRAST CHECKER 


bit.ly/2ALPtTp 


Using this tool will help ensure 
that your chosen colours meet 
accessibility criteria. The AA and 
AAA web standards will make 
sure that your designs are 
compliant and user friendly. 
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COLOUR 
PERSONALITY 


BLUE 


e Intellectual e Coolness 
e Trust e Calm 


¢ Efficiency 


SS = — 


GUMBINEG GAPTURE & GULOUR cust’ cere. 


Adobe Capture CC is a fantastic app pay FIND COLOURS photo and then make sure the app 
that enables you to find fonts and FROM A PHOTO has cropped the text correctly. Hit the 
colours simply by taking a photo. You mm From the Colors tab within big tick and let Adobe analyse the 
may be wondering what fonts are the app, simply tap the ‘+’ button and image. Once it has finished analysing, 
used on a favourite magazine, ahem. point the camera towards the object it will provide you with a list of best 
Or you may wish to take colour or scenery you wish to capture. You matched fonts within Adobe Typekit 


references from an object or scenery. will see that the app is already working that you can then go on to use. 
at finding popular colours. Once youre 
happy with your arrangement, take 
the photo and refine it further. 

You can proceed to save your 
captured colours to a library, picking 
them back Up and using them in 
other Adobe tools. 


GREEN 


eRefreshment ¢ Environmental 


«Restoration «Peace 


e Reassurance 


Realigned 
equestria... 


DOWNLOAD THE APP 


You can find the app on the 
B® iOS App Store or Google 
Play. Simply search for Adobe Capture, 
download and register/log in. 


Realianed 


My CREATE A SHAPE 


Although it’s not strictly VELLOW 


typography or colour- 


= eee eee eee " felated, Shape is a very useful feature * Optimism - Friendliness 
9 WHAT THE FONT? for a number of reasons. It’s a great «Confidence ~_« Creativity 
You can also find out what way of vectorising an object so that HE aocrsion 
: ga fonts have been used or find you can play around with it further 
closely matched fonts in printed in Illustrator. 
material. Head over to the Type tab For example, you may wish to 
within the app and direct the camera vectorise a signature or perhaps 
over the typography you wish to some freehand typography. It’s 
capture. There will be a blue line that great for capturing elements that 
helos you with alignment. Once you are just sometimes easier to draw 


have the typography in view, take the with pen and paper. 
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Overlay graphics on 
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Inspired Db 


| 


| 


eo backgrounds t 
http://project-redspace.com : | 


| Call to Action 


After the images have animated 
onto the screen, the text and call 
to action button appear on the 
screen enabling the user to go 
deeper into the experience. 


. | ** 
Main navigation 
The main navigation is 
available, hidden behind 
the main burger menu. CHAPTER @1 
Clicking this animates the 
overlay menu down from 
the top of the screen. 


This is Redspace. 


A project that began with the idea to optimize commute times in 
° Chinese megacities, Redspace is the design solution that 
Video background leverages interior spade 


The site is set up to tella 
story, very similar toa ow, ri 
documentary, and the — b- EAE LERE 

main background is a full ; 
screen video. 


“ie CHAPTER 91 o: CHAPTER 02 CHAPTER @3 
Bia Joumey Car — Design 


- 
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Overlaid SVG images | Keeping you orientated 


When the video starts to | The bottom of the screen has 
play, the crisp SVG images three stages of the story and 
spring forward and expand locates the user where they are 
into place in the centre of as a means of navigation to 

the display. efficiently get around. 


Pe Dn : SS 


workshop 


EXPERT ADVICE 


Engage the user 

The Project Redspace site works so 
well because it engages the user with 
a strong narrative. Having a story at 
its core makes the user intrigued, 
wanting to know more as they are 
drawn deeper into the unfolding 
events. With the user actively 
engaged in the content, they will take 
time to explore all that the site offers. 
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Overlay graphics on video backgrounds | 


S DOWNLOAD TUTORIAL FILES wwwilesilo.co.uk/webdesigner 


An easy to follow process 

Making use of video segments throughout the site shows the design process 
of the car in a very visual way that creates a compelling story to hook the user 
into the ideology of the project's goals. Three main pages work together to tell 


<comment> 
exoertethnk | different aspects of the story and make for easy navigation. 
of the site | Mark Shufflebottom, Professor of Interaction Design 


Technique 


1. Creating graphics over video 


The first step in creating graphics over video background 


is to add the video to the document. The video 
placeholder here is an open source movie that will serve 
as a background. This is placed inside a div tag and 
appropriate classes are added for CSS control. 

<div class=”fullscreen-bg’’> 


<video loop muted autoplay class=”fullscreen- 


bg_video”> 

<source src="http://dev2.slicejack.com/ 
fullscreen-video-demo/video/big_buck_bunny. 
mp4” type=”video/mp4’’> 

<source src="http://dev2.slicejack.com/ 
fullscreen-video-demo/video/big_buck_bunny. 
ogv” type=”video/ogg”> 

<source src="http://dev2.slicejack.com/ 
fullscreen-video-demo/video/big_buck_bunny. 
webm” type=”video/webm’> 

</video> 

</div> 


2. Adding the graphics 
Below the video in the body section, the content is 
added. In this case that content is going to be two SVG 
graphic elements and a heading. The content is placed 
over the top of the video and then the graphics will be 
Stacked up through CSS. 

<div class=”content”> 

<div class=’graphics”> 

<img src=” images/shapel.svg”> 

</div> 

<div class=’graphics”> 

<img src=” images/shape2.svg”’> 


</div> 
<div class=’graphics”> 
<h1>Journey</h1> 


</div> </div> 


3. Creating your CSS 

In the heading section of the page, or in a separate style 
sheet, add the following code. The first rule sets all 
elements to have border-box sizing so that the border 
and padding are included in sizes. The body of the page 
is given the full height of the browser. 

“aie 

box-sizing: border-box; } 

html, body { 

margin: Q; 

padding: Q; 

height: 100%; } 


4. Position the background video 
The background video is positioned absolutely over the 
full dimensions of the screen and given a minimum 
width and height so that they always completely fill the 
screen. This video element is centred vertically and 
horizontally in the browser. 

.fullscreen-bg_video { 

position: absolute; 


top: 50%; 
left: 50%; 
width: auto; 


height: auto; 

min-width: 100%; 

min-height: 100%; 

transform: translate(-50%, -50%); } 


5. Content positions 
The container for the video is given a fixed background 
position and is positioned to fill the entire screen, while 
being placed behind all other elements on the display. 
The content runs, by default, over the top of the other 
media and is told to be relatively positioned. 

.fullscreen-bg { 

position: fixed; 

top: Q; right: Q; 

bottom: @; left: Q; 

overflow: hidden; 

z-index: -100; } 

.content { 

margin: @ auto; 

width: 100%; height: 100%; 

max-width: 96Q0px; 

padding: @ 15px; 

position: relative; } 


6. Positioning the graphics 
The graphics are placed over the top by placing them 
absolutely in the relatively positioned content box. This 
class is applied to graphics and heading so that it’s over 
the top. Finally the heading is styled up with the 
appropriate font and colours. 

.graphics { 

width: 100%; 

position: absolute; 

top: 50%; 

transform: translateY(-50%); } 

hl { 

font-size: 8em; 

text-align: center; 

font-family: “Helvetica Neue”, Helvetica, 

Arial, sans-serif; 

color: #fff; 
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Tutorials 


Code a dynamic 
SVG radial menu 


Use SVG, jQuery and the GSAP animation library to 
create an animated radial menu 


= DOWNLOAD TUTORIAL FILES 
vy www-ilesilo.co.uk/webdesigner 


52 tutorial 


here’s so much that can be achieved 
natively in the browser using CSS3 or the 
Web Radial menus. It’s something we’ve 


seen used on the web before, mainly 
back in the days of Adobe Flash — although recently 
implementations in JS and/or Canvas have been 
spotted in the wild — but they’re often seen in software 
used on touch screens. We'll be creating our very own 
radial menu but we'll be using SVG for the drawing and 


jQuery and GSAP to handle the interaction and animation. 


SVG is perfect for these kinds of elements due to its 
navigable DOM and responsive nature. We can capitalise 
on these properties to create a complete user interface 
(Ul) or specific parts of a Ul — such as a menu. 

The idea behind our radial menu is that each circular 
layer would be revealed when the layer before is 
interacted with. The menu contains three layers; the first 
layer is the menu button in the middle; the second 
consists of four icons; and the final layer contains three 
buttons for each of the four buttons found on the 
previous layer. 

We'll be creating the design in a graphics editor (this 
example was created in Sketch) but you can use any 
vector drawing program that exports to SVG. 


1. Design the menu 

The first step is to create a design for the menu using a 
graphics editor. The grouping of elements here is 
important as we need to create all of the layers we'll need 
later for the reveal process. The circular backgrounds on 
the icons are the hover states and the hit area for each 
button. Once complete we need to export the SVG file. 
Check out the code snippets here: http://srt.It/cOH1. 


2. Create our first timeline 

GSAP offers two timeline types: TimelineLite and 
TimelineMax. The ‘max’ version offers us access to 
additional features such as the ability to repeat 
animations, as well as playing them in reverse among 
other features. Our first timeline will be the water which 
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we will repeat infinitely and yo-yo back and forth. 
var animation_water = new TimelineMax({ 


repeat: -1, 
yoyo: true 
»), 
http://srt.It/D9rNOm 


3. Container styles 
Next we'll create a new pen on CodePen and paste our 
optimised SVG code into the HTML editor. We'll wrap a 
container div around the SVG and provide some simple 
styles to position and size the container, as well as 
applying the background image. 
| .container { 
| position: relative; 

display: flex; 

align-items: center; 

justify-content: center; 

min-width: 100vw; 

min-height: 10Q@vh; 


I 
http://srt.It/k7EeS 
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4. SVG styles 


Next we'll add a class to our SVG and provide some 
simple styles to control the size of the menu. 
.menu { 
width: 100%; 
height: auto; 
max-width: 792px; 
max-height: 100%; 
b 
http://srt.It/ZYCA4c 


5. Hover and active states 
We can use CSS to create our hover states and use a class 
name of ‘is-active’ to control the basic interaction. We'll 
change the cursor to a pointer and change the opacity of 
background circles. We will also add some similar styles to 
the main button in centre. 

[class$=”"-button”] { 

cursor: pointer; 


circle { 

Opacity: Q; 

transition: opacity 25Q@ms; 
&:hover { 

Opacity: Q.6; 

Te J 


http:/srt.It/RtXn 


6. JavaScript 

For the remainder of the interaction we'll need to turn to 
JavaScript. Make sure you've included the GSAP and 
jQuery libraries, So we can create our first timeline and 
animation. We're going to animate the middle layer of 
buttons from a scale of ‘O’ to its original size. 


Accessibility 


The code we are writing for this demo is meant as 


an example of creating interactive SVGs. The code 
is not accessible and shouldn't be used for 
production without modification. 


Left 
Create the design using a vector graphics editor such as 
Sketch for Mac 


Top 
Using CSS we've provided a simple interaction when the 
buttons are hovered over 


tutorial 53 


Tutorials 


Codea dynamic SVG radial menu 


var animate_middle = new TimelineLiteQ); 
animate_middle 
.from(“.middle-layer”, @.5, { 
transformOrigin:”50% 50%”, 
scale: “Q” 
Japa Ore) 


http://srt.It/kLc8M 


7. Spin and fade in the icons 
The GSAP library allows us to layer animations onto a 
single timeline. We'll utilise this to create two more 
animations to the ‘animate_middle’ timeline. We'll add 
rotation and opacity animations to the buttons of the 
middle layer. The animation will now grow the circle while 
spinning and fading in the icons. 

animate_middle 


.from(“.middle-layer .button-group”, 
O15. 4 

transformOrigin: “50% 50%”, 
rotation: “-=135” }, Q, Q) 
.fromC‘middle-layer .button-group”, 
Q.5, { 

Opacity: “Q” }, @, Q) 


http://srt.It/YiKm5C 


8. Animate the outside layer 

Next we'll create a new timeline for the outside circle. The 
animation will be exactly the same as the first animation 
we created to animate the inside layer. This time we wont 
be adding anything else to the timeline as we wont 


GSAP documentation 
and forums 


The Greensock site is an invaluable resource for 
learning to utilise GSAP. The site includes learning 
resources, examples and a beautiful showcase of 
sites built using the library. https://greensock.com 


Top left 
With our animations paused to begin with they are 
hidden when the page is loaded 


Topright 
We've now created the click function to play the first 
animation, revealing the first layer of buttons 


Bottom left 
The home buttons are now hidden due to the initial 
paused state of the timeline 


Bottom right 


The finished product including the active states for our 
buttons on each layer 
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always need to animate the buttons and circle together. 
var animate_outside = new TimelineLite(); 
animate_outside 

.from(“.outside-layer”, @.5, { 

transformOrigin:”50% 50%”, 

scale: “Q” 

Tike O) 


http://srt.It/SijNa 


9. Timeline play states 
Now we have both of the layers animating we can update 
their initial play states. This will allow us to pause the 
animations until we interact with them, hiding the two 
layers of buttons we've created animations for. We also 
want to create a new variable to set the menu state. 
var animate_middle = new 
TimelineLite({paused: true}); 
var animate_outside = new 
TimelineLite({paused: true}); 
var menuOpen = false; 
http://srt.It/ZgCi7 


10. Create our first click function 
Now we have our animations created and paused when 
the page loads we need to create a function to trigger the 
animation when the centre circle is clicked. Within our 
click function we will check to see if the menu is open 
using our ‘MenuOpen variable. 
§ $(C‘.main-menu’).click(function() { 
if(menuOpen == false) { 


animate_middle.playQ; 


menuOpen = true; 
3 
Dp: 
http:/srt.lt/LaXOf 


11. Close the first layer 

In the last step we checked to see if the menu was closed, 
played the animation and updated the menu state 
variable. We now need to provide what happens when 


the button is clicked and the menu is already open. GSAP 
allows for timelines to be played in reverse so we can 
have the centre layer animate back into the centre. 

else { 


animate_middle.reverse(); 
menuOpen = false; 
} 
http://srt.lt/k3PsOA 


12. Additional variables 


In the same vein as the main menu button we need to 
create a number of variables to keep track of the menu’s 
current state. The outside layer contains four separate 
menus and the circle. Here were creating a new variable 
for each of those menus and the outside circle. 

var outsideCircleOpen = false; 

var homeOpen = false; 

var faqOpen = false; 

var settingsOpen = false; 

var moreOpen = false; 
http://srt.It/kG7pW 


13. Outside layer logic 
We now need to create a number of click functions, so 
we'll start with the home button at the top. When we click 
this button we need to check for two things; if the home 
menu is already open, and then inside of that logic, if the 
outside circle is already open. If the outside circle is 
already open we don't need to animate it, we can simply 
animate the buttons and leave the circle open. 
$(‘.home-button’).click(function() { 
if(homeOpen == false) { 
if(outsideCircleOpen == false) { 
animate_outside.play(); 
} 
outsideCircleOpen = true; 
homeOpen = true; 
ii 
3 
ys 
http:/srt.It/E8tG 


GSAP animations 
The GSAP animation library is simple other animation GUI. 
yet extremely powerful. The library | 


gives us a really simple syntax and 
handles all of the complex calculations 
under the hood for us. In its simplest 
form the library allows us to create 
timelines and then add animations to 
these timelines. This concept will be 
familiar if you've used Flash or any 


var tl = new timelineLite(); 

Once we have created a timeline we 
can create an animation to add to it. 
The example below will animate the 
‘circle’ element from a scale of ‘O’ to 
its original scale, over the duration of y 
one second. We're also providing the 
delay and start times of ‘O’ although 
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this isn’t required as they are the 
default values. 
tl.from( 
"Cie Lee on lad t 
scale:’Q’ 
}, 2, @ 


The library also has a number of more 
complicated functions we can use 


timeline.to/from( 


‘element to animate’, animation duration, { 


property : value, 


}, delay time, start time or label 


14. Outside layer else logic 
In the last step we created the logic for when the home 
menu was not already open, so here we create the 
opposite logic. We need to make sure to update the 
variables to ensure we can keep track of the menu's state. 
We also play the ‘animate outside’ timeline in reverse 
when clicking the main menu button. 
else { 
homeOpen = false; 
outsideCircleOpen = false; 
animate_outside.reverse(); 
3 
http://srt.Ilt/z2DcYw 


15. Animate the 
home menu buttons 
We now need to create a new timeline for our home 
menu buttons and change the initial play state to paused. 
We can utilise GSAP’s ‘staggerFrom function to apply the 
Same animation to the buttons, one at a time, with a given 
delay between each iteration. 
var animate_home = new TimelineLite({paused: 
true}); 
animate_home 
.StaggerFrom(“.home-menu g”, @.5, { 
transformOrigin:”50% 5%”, 


Opacity: “Q”, 
scale: “Q” 
}, @.125, @.25) 


? 


http://srt.It/qiSyG 


16. Add animations to 

click functions 

We've created our home button’'s timeline so we now 
need to update our click function to include playing and 
reversing the animation when the home button is clicked. 
B $(‘.home-button’).click(function®d) { 


if(homeOpen == false) { 


animate_home.playQ; 
} else { 


animate_home.reverse(); 
} 
Ds 
http:/srt.lt/qC2B5s 


17. More menu 

We now need to do exactly the same for the More menu 
by creating a click function and staggered animation 
timeline for the menu and its buttons. We also need 

to update the menu state variables within each of our 
click functions. 


http://srt.It/Ai3rT 


18. Settings and FAQ menu 


As you may have guessed we need to repeat the same 
thing for both the Settings and FAQ menus. Remember to 
add the menu state variables to each of the layers and 
play the animation timelines in reverse. 


http://srt.It/x5wTx 


19. Almost finished 


We now have all of the animations being triggered and 
played, or reversed given the appropriate click on the 
middle layer. We need to make sure all of the animations 
are reversed and the state variables updated when the 
main menu is clicked and is already open. 
$(‘.main-menu’).click(function() { 
animate_middle.reverse(); 
animate_outside.reverse(); 


menuOpen = false; 
outsideCircleOpen = false; 
homeOpen = false; 


like the staggerTo and staggerFrom 
functions, which allow us to animate a 
number of elements one after another, 
as well as a number of paid plugins for 
really specific uses. 

The library is performant and 
handles much of the browser 
compatibility issues you would run into 
making it ideal for production. 


; —_ 


http://srt.It/Bk2HZ4 


20. Active states — middle layer 
That's all of our animations and click functions created - 
the only thing left to do is to add the ‘is-active’ class to the 
button that has been clicked. jQuery allows us to use 
advanced CSS selectors to first listen for any click to 
buttons in the middle layer and then to remove the class 
from all the other buttons. 
$(‘.middle-layer [class*=’-button’’]’). 
click(functionQO{ 
$(‘.middle-layer [class*=”-button’’]’). 
| removeClass(‘is-active’ ); 
$(‘.outside-layer [class*=”-button’]’). 
removeClass(‘is-active’ ); 
$(this).addClass(‘is-active’); 
iD: 
http:/srt.It/T8Z3f5 


21. Active states — outside layer 
We now co the same thing for the buttons on the outside 
layer, targeting, removing and adding our active class to 
the clicked button. That’s it, our radial menu, created with 
SVG, animated with GSAP and coded with jQuery is 
finished. The animations are simple yet effective and the 
active states and hover interactions allow the user to keep 
track of their place in the menu. 
$(‘.outside-layer [class*=’-button”]’). 
click(functionQO{ 
$(‘.outside-layer [class*=”-button’]’). 
removeClass(‘is-active’ ); 
$(this).addClass(‘is-active’); 
De 
http:/srt.It/k9Gj1x 


Collection of tutorial pens - http://srt.lt/AmTp 
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= DOWNLOAD TUTORIAL FILES 
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erspective is everything in design. If Define Pattern Lay out your text 

something you've drawn has a perfect Go to Edit>Define Pattern. Name it and then click OK. Use the Type tool and create the text that you want to use 

perspective, it will help your work look Create a new 1920 x 1080 document by going to File> across the document; we're going with ‘London, England’. 

more realistic; alternately, Pablo Picasso New, and then go to the Paint Bucket (G). Use Pattern fill This is important, as it will dictate the size, spacing and 
made history by drawing with a very skewed sense of and on a new layer, fill with the pattern you've created. whole look of your isometric poster. 


the reality around him. =z 
Isometric art is as much of a science as anything, i [nee = EE) - Hee nome “at eel sins as veo 
though. It has a very strict set of rules when it comes to aa 
what goes where. That’s pretty difficult to sit down and ; A es 
draw yourself, but when it comes to Photoshop, you can 


create a guide for anything. 
In this tutorial, were going to set out a perfect 
isometric grid before we build a world on hexagonally 


facing lines. In this London-inspired image, we're going Transform the pattern 

to trace the Thames isometrically, and even create Now we're going to make the pattern isometric! Make the Create some letters 

isometric versions of landmarks. You'll find that anything width and height much bigger, the angle 35 degrees and Create isometric letters with the Pen tool, following the 
can be created on this grid, since it simply holds cubic place in the centre of the document. The grid should be guide that you created. This is a trial-and-error part of the 
Shapes together. Curves can simply be drawn from made of diamond shapes. process, and will take the longest of everything. 


Experiment with shapes and Fill with #808080 for now. 
Pe 


corner to corner. 
Everything in the image is going to follow this structure 
too; you can use images to copy, you can follow our steps 


religiously, or you can design your own icons following 


a 
Won 
a 


isometric patterns. It's entirely up to you — within the 


A 


limits of isometry, of course. 


Start the grid 


ae 


x 


Begin by creating a new document of 20 x 20 pixels. & 

Create a black strip down the right and bottom of the Choose your palette & <> ce > <i 
document with the Rectangular Marquee tool. Use the We're going to use five different colours for this, but —_ ie - <2 > 

Grid if you need to, by hitting Cmd/Ctrl+. different shades of each. The colours are Royal Blue Z _ < => >. 
SS i = (#021574), Muted Red (#f22f50), Spearmint (#6ec5cf), <i ¢oman — 


x 
“ 
\X 


Peppermint (#6ecfbO), Tan #ff935e) and White Gftffff). 


Above 

Create a flat guitar with the Pen tool, and transform it up 
so it’s in line with the grid. Duplicate and darken the lower 
layer by -20 lightness before moving this layer up slightly 
too, to make it 3D 


Left 


Use a reference photo of a whale tail to draw your own 
whale in the Thames with the Pen tool 
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Work on the letters 
The isometric letters are going to have to have one side 
that predominantly faces forwards. Work out where the 
curves are on each of the letters by reducing the 
Opacities. This might take some time to figure out, and 
you may need to redraw some letters. 


Shade the letters 


Group each set of layers for each letter. Create clipping 
masks for each, and add either light or shade to the 
letters so that they appear 3D. Work out where the light 
is in the image and judge accordingly. 


Above 
Create a circle with the Elliptical Marquee and Ctrl/ 
right-click to choose Stroke to draw your main circle. 
Draw lines within it, and draw a structure to hold it up. 
Transform this to the grid 


Right 

With your London Eve in place, draw the round brush 
strokes around the outside of the wheel. Make them 
smaller the further away they are in perspective. 
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Colour and build bridges 
Create new Overlay layers above each of the letters 
and fill with one of your colours. Add Colour layers, 
clip, and brush in another colour to flesh it out. Next, 
create bridges between some of the letters. Colour 
this with another colour. 


Create a speaker 
Now, were going to add objects to the scene. Create a 
box using the isometric guide, lightening and darkening 
either side of the box to create perspective. Create two 
circles, and Transform these to fit into the box along the 
guide; add a Stroke to the circles using Layer Styles. 


Faerie et 


Add a flag 


Next, were going to create a flag. Again, use the Pen tool 
to draw along the guide, and then fill with white. Clip 
layers to this, and touch soft black brushstrokes over 
one side of the flag to add shade. 


Plant some trees 
Trees are easy to create with the Pen; create a triangle 
with the two bottom sides lining up along the isometric 
guide and then darken one side. Repeat this twice, then 
add a stump. Colour with an Overlay layer. 


__ 


Escalators and map planning 
We've created escalators using the same methods we 
used to create the other objects, using the isometric 
guide to draw over. After that, we've used a real map of 
London to roughly trace the Thames and draw a white 
outline for some water to fill. 


Curve the edges 
Use the Pen tool to curve the edges of the white structure 
that you've just created, and fill with #208080. Use a soft, 
black brush to create the illusion of a curved space for the 
water to sit in. 
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Fill with water 
Use the Pen tool to select the grey space in each of the 
white structures and falling from the top structures, and 
fill with blue on a new layer. Set this layer to Hard Light to 
make it look like it’s actual liquid. Clip a white layer and 
delete a jagged pattern in the middle for added effect. 


=) | al S- he 


Start the chandelier 


Create a new layer and add dots in the intersections of 
the lines like you can see in the screenshot. Select the 
back rows of these dots and reduce the Lightness to -10 
by using Hue/Saturation (Cmd/Ctrl+U). Duplicate this 
downwards to create more dots. 


Finish the 
chandelier 
Create the same effect three times 
with multiple rows of dots, then 
resize the two latter ones. Stack 
these to create a chandelier effect. 
On new 20% layers, create white 
dots to suggest light emanating 
outwards. 
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Drawing the train 


Start by drawing the train 
track along the grid, and use 

a reference photo to design 
the front of a tube train with 
the Pen tool. Transform it to 
the grid and place it over the 
tracks. Create a new layer 
below the front of your tube 
train, and create straight lines 
leading up under the ‘N’ with 
the Pen tool, before you create 
the rest of the train by filling 
in selections with blue, red 
and white. Create a window 

in grey, and then create three 
new layers. Reduce these new 
layers to 20% opacity, and 

on each create a white circle 
getting progressively bigger 
with each layer. 


Create Big Ben 
Use a stock photo of Big Ben to draw the clock with the 
Pen tool; you dont have to be as detailed, though, of 
course. Draw it in shades of grey; draw the spire to one 
side of the building rather than straight upwards, too. 


Place the landmark 
Colour Big Ben with some Overlay 
layers, duplicate the layer and then 
flio this new one horizontally. Resize 
both layers and Skew with Free 
Transform to fit along the guide 
that you have created. 


Finishing touches 
Make any final flourishes that you'd like to add more to 
the image; this might include stars in the background 
with little dots, a whale in the Thames or altering the 
colour with a Curves adjustment. 


Add noise 


Finally, select black and white in your Swatches (D). Create 
a new layer, fill with black (Alt/Opt+Delete) and go to 
Filter>Noise. Choose 400%, check Monochromatic and 
click OK. Set this layer to Soft Light, 10% opaque. 
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Go home 

logo link 

A logo is presented asa 
distinct part of the 
navigation, allowing 
users to return to the 
home page from any 
location and position. 


Changing 
background 
JavaScript event 
listening enables the 
colour of the 
background to change 
at specific scrolling 
locations generated by 
the user. 
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Page navigation 

Page navigation uses fixed 
positioning, always appearing in the 
same place regardless of how far 
down the page the user scrolls to. 


BOOST EWTERPRISE LABS 


DESIGN 
BUILD 


We area tech venture bullder spread ocross Madrid, NYC and LotAm. 


We team up with entrepreneurs and companies to build and launch digital ventures. 


Page content 

This is the page content that the 
user can scroll through. The effect 
only works if there’s enough 
content to allow for scrolling. 


Navigation prompt 

A notification to help make sure that 

users of the website are aware of the 
additional content made available by 
scrolling the page. 


EXPERT ADVICE 
Using body labelling 
Using JavaScript to apply a statu S 
label to the body section is an easy 
way to keep code simple and allowinc 
visual reactions to be controlled fron 
CSS. Take this further by applying 
additional labels to describe specif 
events that have occurrec 

Iser interactions or oth 


ABOUT US 


Create multiple fade background colours 
§ DOWNLOAD TUTORIAL FILES www-ilesilo.co.uk/webdesigner 


Avoid complexity to avoid headaches 
It's worth spending extra time to identify the simplest way to create effects like 
this. Placing too much responsibility within JavaScript increases scope for future 


<comment> | changes breaking functionality, costing time to fix. This example avoids the 


What our 
experts think 


problem by keeping JavaScript’s involvement to a minimum. 


of the site | Leon Brown, freelance web developer and trainer 


Technique 
1. Initiate HTML document 


The first step is to initiate the HTML document that will 
be the framework for storing the content and loading 
external resources. This document contains a head 
section that loads CSS and JavaScript resources, along 
with a body section for defining the visible content in 
step 2. 

§ <!DOCTYPE html> 

<html> 

<head> 

<title>Scrolling Background Change</title> 
<link rel=’stylesheet” type="text/css” 
href=”"styles.css” /> 

<script src=”code.js” type=”text/ 
javascript”></script> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. Body content 

The main content can consist of any HTML, providing 
that it covers enough space to allow for scrolling. This 
example will use an article container that will be 
controlled via CSS to allow for scrolling. 

<article> 

<h1>Content</h1> 

| </article> 


3. JavaScript scrolling 

Create a new file called ‘code js. This JavaScript listens for 
a scrolling event, upon which it calculates a screen 
number based on the vertical scroll position and sets the 
DOM body's ‘data-screen attribute as this value. Any 
visual changes to ‘data-screen’ can now be defined via 
some CSS. 


window. addEventListener (“load” , function(){ 
window. addEventListener(“scroll”, functionQ{ 
var screen = Math. round(window.scrollY/ 
window. innerHeight) ; 

document. body. setAttribute(“data-screen” , 
screen); 

3) 

Ds 


4. CSS screen definition 
Create a new file called ‘styles.css. The ‘data-screen’ 
attribute applied to the DOM body via the JavaScript is 
used to define the default screen properties. Its 
background colour is set to white, while a transition is set 
to animate changes to the background colour over a 
duration of one second 

Ldata-screen]{ 

background: #fff; 

transition: background-color 1s; 


I 


5. Screen colour changes 
The JavaScript processing of scrolling events from step 3 
allows CSS to define presentation rules for specific 
positions. Each count of ‘data-screen is the full height of 
the browser screen. This step sets different background 
colours as the user scrolls down the equivalent of a full 
screen height. 
Ldata-screen="1” ]{ background-color: red; } 
[data-screen=”2” ]{ background-color: green; } 
[data-screen=”3” ]{ background-color: blue; } 


6. Example content size 
Due to this example not having five screen heights of 
content to produce the required scrolling, this step sets 
the article container to fit this size. This allows you to test 
the effect before committing to inserting the content. 
|} articlef{ 

display: block; 

min-height: 4@@vh; } 
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Layout is one of the most important aspects of to find the information elsewhere. Here we take 
the web and applications. We need to consider you though every aspect of the process, from the 
a number of different things from the target initial inception of the project through to building 
audience to the brand and the content. Get it and structuring the code, and touch on which 


wrong and your users will get confused and leave — display properties you should use. 
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DESIGNING LAYOUTS 


THE PROCESS 


The design phase of a project usually 
begins with a scoping document of 
some description. This document 

will contain a specification of what 
youre designing. 

The starting point for designing 
layouts really depends on the 
complexity of the project: 

Brochure websites — for example 
— will usually use a fairly simple design 
phase and usually include the 
following processes: content gathering 
-> site map creation -> wireframing -> 
high-fidelity concept design. 

Whereas a more complex web app 
design phase might include a few 
extra processes: gathering content -> 
site map creation -> 
wireframing -> low-fidelity 
prototype -> high-fidelity 
concept design -> high- 
fidelity prototype. 

There's no right or wrong 
way to do this and different 
designers use different processes. It’s 
up to you — as the designer — to find 
the right process for the project at 
hand. This may also be dictated by the 
project’s budget, when this is the case 
you need to decide which of these 
processes are the most important for 
the project youre working on. 


HIGH- VS LOW-FIDELITY 


In the process diagrams explained 
above they mention both high- and 


low-fidelity designs and prototypes — 
this simply is how far you go with the 
design. A low-fidelity prototype, for 
example, is usually made up from the 
elements in the wireframes; whereas 
a low-fidelity design may be slightly 
more designed than the wireframe 
you might use for the project's brand 
colours and fonts. 


APPLYING THE BRAND 


This includes obvious things such as 
the logo and colours and typography, 
but also everything else that comes 
with it: the language; the intent (is it 
playful or corporate? Is it confident 
and loud?); any printed materials; and 
anything the company has that 


ELEMENTS AND RULES ARE 
USUALLY REPRESENTED BY 
THE BRAND GUIDELINES 


represents them. This will help you 
understand how to display the content 
on the screen. 

These elements and rules are 
usually represented by the brand 
guidelines document — if you have 
one, be sure to study it! 

Once you understand the brand 
you can look for ways to apply it to 
your design — are there any brand 
elements you can use, such as shapes 
or patterns? Are there any ways to use 


The Design phase of a project typically 
includes a number of processes 
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This image shows the design process for the Baltic Training website, from 


initial sketches through wireframes and design to the final live website 


SITEMAPS 


What you know about the brand to 
influence the layout and design of 
your project? 

These details are what will give the 
design meaning and help cement the 
brand into the company’s DNA. For a 
lot of users the website will be the first 
time they see the brand and, since 
you dont get to make a first 
impression twice, you need to get this 
right! Besides, being on-brand should 
helo keep the client happy too, and 
that’s always good! 


STRUCTURING THE DATA 


You can use the wireframing stage of 
the design in order to work out the 
content that needs to be structured. 
It's always best to get the 
content before you start the 
high-fidelity design stage, in 
the real world this very rarely 
happens, but it’s much easier 
to design something when 
you know what information 
you need to include. Once you know 
the content of the page you can start 
to structure the data by breaking it 
down into sections or chunks. 
Depending on the quality of the 
content this can be a really simple or a 
really difficult thing to do. It’s important 
to keep linked information together so 
you dont confuse the user, but you 
can use these sections or chunks of 
content to influence the type of layout 
youre going to create. 
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Visual Sitemaps 
A necessary part of the design. 
They tell everyone involved ina 
project what pages are going to 
be in the project and how they 
are going to be linked together. 
You can simply draw these on 
paper or create them using a 
graphics editor, you could use 
Microsoft Word or even Excel for 
that matter. The idea here is to 
structure the data for the project. 
There are a number of tools 
built specifically for creating 
sitemaps, such as Slickplan, 
MindNode and WriteMaps. 


XML Sitemaps 

These are created once the 
project has finished, and are used 
by search engines to index your 
project’s contents and structure. 
While they can be created by 
hand, there are a number of 
tools available for generating 
sitemaps — the tool you need will 
depend on your project. If you're 
using WordPress as the backend 
you can use a plugin to generate 
the XML sitemap. Once created 
you need to submit the sitemap 
to the search engines using their 
webmaster tools. 
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—— 


Initial sketch for the Baltic 
Training website homepage 


SCRE TNERS 
——| 


These structural designs are meant to 
be kept simple and they need to be 
quick and easy to make. They serve 
as a visual representation of the data 
that’s to be provided to the user on a 
particular page. 

Multiple iterations on the same 
page can be made at this stage. 

Wireframes should be used to flesh 
out initial ideas; the good, the bad and 
the ugly. Wireframes arent meant to 
be beautiful and the initial wireframes 
dont even need to be shown to the 
client or stakeholders. Write down a list 
of elements and content you need to 
include and create every variation you 
can think of — it’s very rare that your 
first idea is your best! During the 
wireframing stage designers tend to 
be much less attached to an idea too, 
probably because of the amount they/ 
you have created. 

The amount of time you spend 
wireframing a project will usually 
depend on its complexity and on 
budgetary constraints but wireframing 
a project and getting everything right 
at this stage can save a lot of money 
and heartache later on. By sharing 
these wireframes with the client or 
Stakeholders early in the design phase, 


problems in the layout and usability 
can be spotted and fixed much more 
quickly and less expensively than ina 
concept design, or worse during the 
build process. 


GREATING WIREFRAMES 


The best place to get all of your ideas 
down is on paper. A good method is 
to use some kind of felt-tio pen since 
this wont let you get into too much 
detail, were just creating structure at 
this point. You can draw them again 
later with a finer pen to flesh out more 
of the details. 

Draw blocks on the page and think 
about how they can be changed and 
moved and how this will affect the 
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flow of the content and the user's 
journey through the website or app 
that youre developing. 

From all of the designs you've 
drawn you can then select a few that 
you think will work best and then 
refine them further. At this point you 
could use any number of tools at your 
disposal — you could draw them again 


using a finer-point pen while taking the 
time to flesh out some of the details, 
or you could use apps such as Sketch, 
Photoshop or Illustrator to create 
these higher-detail wireframes. 
Alternatively you could use software 
specifically built for wireframes and 


prototypes such as Balsamiq Mockups, 


Axure or Adobe XD. 
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94% 


3671 


Blog 


Apprentices Employer 
Case Study 
87% 
1791 
Partners 
Social 
Tweet 


Wireframe for the Baltic Training website 
homepage, created using Sketch 
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Methodologies, tooling 
and project structure 


When it comes to building the project 
there are a number of methodologies, 
tools and project structures which can 
be very useful for helping you manage 
the codebase. 

These methodologies are useful 
when working in teams. No matter 
which member(s) of the team wrote 
the code it will be familiar to everyone 
else should they need to make 
changes or take over the project. 
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There is no right or wrong way to 
do this, you can use whichever 
methodology you choose or even a 
mix of a few, you just need to make 
Sure everyone in the team is working 
to the same principles and guidelines. 


METHODOLOGIES 


There are a number of different 
methodologies available to you, or you 
could simply create your own. Three 


feature 


of the most popular are BEM, OOCSS 
and SMACSS. 


BEM 

BEM or Block Element Modifier is, at 
its heart, a naming convention. It 
enables you to split the code into 
reusable components by scoping 
elements to a block. The naming 
convention works like this; blocks are 
the start of the class name: 

B .block 

Elements are then scoped to a block 
using a double underscore: 

B .block__element 

Then modifiers are used for smaller 
changes or additions, a different 
colour for example: 

B .block__elements--modifier 


This helps keep problems with 
specificity to a minimum as well as 
creating styles that can be reused 
throughout the project. 

It’s important to note that the BEM 
structure doesn't necessarily follow 
the exact structure of the DOM. If you 
have a block with a container element, 
for example, subsequent elements do 
not need to be scoped to the element 
but to the block: 

<div class=”block”> 

<div class=”block__content’> 
<h1 class=”"block__title”></ 
h1> 
</div> 
</div> 


O0CSS 

OOCSS stands for Object Orientated 

CSS, the two main principles of this 

methodology are: 

e Separate structure and skin 
This means that the entire structure 
of the website should be separate to 
the styles that apply visual and 
decorative properties. 

e Separate container and content 
This means “rarely use location- 
dependent styles”. In other words, 
any given element should look the 
Same no matter where it appears 
on a site. 


SMACSS 


SMACSS stands for Scalable and 
Modular Architecture for CSS. There is 
nothing to download and include in 
your project — it’s more of a style 
guide, a set of rules to help keep the 
specificity demons at bay. The 
architecture is complex, which is why 
some teams overlook it but there are 
a lot of useful rules to apply. 


CREATING LAYUUTS 


Creating layouts is about using the 
right HTML and CSS layout modules 
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oo, 
“ Inuitcss 
— 


USING CSS GRIDS 


CSS Grid is perfect for creating 2-axis 
layouts (rows and columns). The 
syntax is simple and makes page 
layout a breeze. Layouts that would 
have required multiple nested 
containers can now be simply 
described in CSS. 

Grid works differently to the other 
layout properties — since applying the 
‘grid’ value to the ‘display’ property will 
affect any direct children. These 
elements are now grid items and will 
be positioned according to the rules 
you set on the parent (unless being 
specially placed). 


GRID FEATURES 


Grid brings a number of new features: 

e Grid gap 
Instead of using margins, grid has 
its own property for defining gaps 
between grid items, enabling the 
layout of the grid to be defined and 
unaffected by any gaps. Grid 
systems (like those found in inuit 
and Twitter Bootstrap) usually rely 
on setting negative margins in order 
to align everything correctly. 

e The Fr unit 
Short for fraction, this new unit of 
measurement is used to split the 
layout into fractions, with or 
without a gap. 


Zs 


e Grid placement 
CSS Grid allows for any element 
to be prioritised and positioned 
anywhere on the grid before all 
other items, which are then 
positioned automatically. 

e Grid areas and templates 
Named areas on the grid are 
defined, which can then be 
referenced to define the layout 
in an almost ASCII fashion. 

¢ minmaxQ 
The ‘minmaxO’ property value 
enables you to apply a minimum 
and maximum size for grid items, 
columns and rows. This feature is 
Sadly missing from Flexbox and 
every other layout module in CSS. 


BUILDING GRIDS 


CSS Grid’s powerful areas and 
templates enable complicated layouts 
to be easily achieved. You start by 
applying a name to the elements 
within your grid using the ‘grid-area’ 
property; for example ‘header { 
grid-area: header, }. Once you have 
named all of the areas in your grid you 
can then use the ‘grid-template-areas’ 
property to describe the layout. 
grid-template-areas: 
“header header header” 
“left-sidebar article 
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right-sidebar” 

“footer footer footer” 

The code example above describes a 
3x3 grid, you simply repeat the name 
of the grid item if you want it to span 
multiple columns or rows. You can 
also use media-queries in order to 
change the grid layout for different 
sized screens. 

You can then use the new ‘fr unit to 
define how the wicth is split among 
the different columns; 

grid-template-columns: lfr 3fr 

fr 
The example shown above will split 
the available width into five equal 
width values, in other words it will 
apply one-fifth to the first column, 
three-fifths to the second column 
and the final fifth to the final column. 

In order to size the rows you can 
use the new ‘minmax’ property value 
to size the top and bottom columns to 
their content and then allow the 
middle row to span the remaining 
Space in the grid. 

grid-template-rows: 

minmax(min-content, max- 
content) 

auto 

minmax(min-content, max- 
content) ; 
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FLEXBOX Perfect for single-axis layouts 


Flexbox is great for creating single-axis 
layouts, either vertically or horizontally. 
Supported by the browser's powerful 
layout algorithm, spacing and sizing 
elements along an axis has never 
been more satisfying. 

The syntax can be confusing 
sometimes and there is a lot to learn 
but once you are familiar with this new 
way of aligning items you'll wish it had 
always been this way. 

Flexbox shares some similarities 
with CSS Grid in that applying the 
value of ‘flex’ or ‘inline-flex’ to the 
‘display’ property will have an effect on 
direct children in the DOM. 

When Flexbox is applied the 
browser will align all of the direct 
children, or flex-items as they are 
called. By default these items will be 
placed in a row next to each other and 
each item will take up as much space 
as it needs, something that’s either 


dictated by its content, or by setting a 
width on each item. 


FLEX-GROW 


The ‘flex-grow’ property enables you 
to apply the leftover width in the 
container once the items have been 
aligned according to their content. By 
setting the flex-items grow property to 
the value of ‘1 the remaining space in 
the container will be shared among 
the items equally. See fig.1 

If we set the ‘flex-grow’ property 
on the last flex-item to the value of ‘2’ 
then the leftover space will not be 
Split equally, the last item will be given 
twice as much of the left over space in 
the container. See fig.2 


FLEX-SHRINK 


The ‘flex-shink’ property does the 
opposite when the container is made 
Smaller than its items’ widths. If you set 


FRAMEWORKS AND GRID SYSTEMS 


Powerful battle-tested systems 


You can save yourself hours of time in 
development since frameworks have 
been battle-tested by a number of 
developers and users. 

However, they can also add an 
unnecessary amount of code bloat to 
the project. When using a framework 
it is worth spending time choosing 
only the elements that you want. This 
will help Keep down the size of the 
files to be used. 

However, thanks to the widespread 
adoption of CSS Grid and Flexbox 
these systems are starting to fall out of 
favour. These frameworks usually offer 
much more than just a grid system, 
but since we're discussing layout we'll 
concentrate on the most popular 
frameworks grid system. 


BOOTSTRAP 


The Twitter Bootstrap grid works 
much like old design grids — they 
apply 12 columns onto the container 
and you (as the developer of the 
project you're working on) choose 
how many of these columns any 
given element should span. 

The grid itself is fully responsive and 
built using Flexbox. Grids are defined 


by using a series of containers, rows 
and columns. 

The number of columns an element 
Spans at any given screen size is 
dictated by part of the class name. 
While this is a powerful grid system it 
is very rigid, the breakpoints for the 
grid are always the same and the 
syntax isn't very intuitive for someone 
who is new to the system. 


HOW DOES IT WORK? 


<div class=”col-12 col-md-9 
H egl>xi-8'> 

The element shown in the code above 
will Soan 12 columns by default and 
then on medium-sized screens span 9 
columns and then on extra-large 
screens span 8 columns. The screen 
sizes are defined in Bootstrap and if 
you are just including Bootstrap as an 
external resource it is very difficult to 
update these values. 

While these grid systems and 
frameworks can be good for 
beginners it’s worth noting that unless 
you know how all of this works under 
the hood youre cheating yourself out 
of learning the fundamentals of CSS 
and relying on someone else's code. 
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the ‘flex-shrink’ property on all the 
items to the value of ‘7’ they will be 
reduced in size equally. See fig.3 

If you set the last item to ‘2’ the 
width with be reduced in size twice as 
much as the other flex-items. See fig.4 


WHEN FLEXBOX 

IS APPLIED THE 

BROWSER WILL 
ALIGN ALL OF THE 
DIRECT GHILDREN 

OR FLEX-ITEMS 

AS THEY 
ARE CALLED 


Default — flex-items — (flex-grow: O; 
flex-shrink: O;) 


Fig.2 — flex-items — flex-grow: 2; for 
the last item, 1 for the others 


Fig.4 — HEX: items — flex-shrink: 2; 
for the last item, 1 for the others 
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JHE EXPERIMENTAL LAYOUT 

| | LAB OF JEN SIMMONS 
http://labs.jensimmons. 

com/index.html 
Jen Simmon site provides a host of 
experiements that reveal what can 
be done CSS Grid. It’s not just CSS 
Grid that is included take a look at 
Whitespace, Flexbox & more. 


CSS GRID LAYOUT AND 
| | ACCESSIBILITY 

https://mzl.la/2nsykld 
Accessibility is an often forgotten 
aspect of layout, but it shouldn't 
be. Check out this resource from 
Mozilla. It asks and answers how 
users should approach 
accessibility with grid layouts. 


Intro to CSS Grid 
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Standard layouts are still the staple diet of many sites, but new 
specifications can mean new direction for layouts. Here we check 
out what’s happening in the world of layouts with expert insight 
and the resources to help get you get to the next level 


A MUST-READ RESOURCES 


A COMPLETE GUIDE TO GRID 

http://bit.ly/1UMOgSd 

As the title suggests this 
is an extensive look at CSS Grid. It 
introduces the basics, browser 
support and terminology before 
going in-depth on the specifics. 
Make sure you bookmark this as it 
is a great reference point. 


EXPERIMENTAL 3D ROOM 

Qo EXHIBITION LAYOUT 
. http://bit.ly/2n6qp05 

This one is a bit more out there. It 
is an experimental 3D layout that 
uses CSS 3D transforms and CSS 
Flexbox to create its layout. View 
the demo at https://tympanus.net/ 
Development/Exhibition 


Ay The 
Experimental 
Layout Lab 

of 
Simmons 


We know that CSS Grid is taking layouts to new levels, but 
what else does the W3 have in the pipeline? Find out more 
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Tutorials 


Shrink your code 
with CSS4 variables 


: 
Change a variable and every rule that depends on that is Updated, giving smaller 


style sheets and a more efficient way to experiment with your design 
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DOWNLOAD TUTORIAL FILES 
tutorial www -filesilo.co.uk/webdesigner 


eb designers have had access to 
variables for some time when 
using CSS preprocessors to create 
style sheets. Now with major 
browser support, CSS4 variables are poised to take the 
power of CSS preprocessors and place this natively in the 
browser for designers to harness. 

CSS preprocessors work by compiling their variables 
down to regular CSS. The benefit of having a variable in 
the browser is not part of what they offer, and that’s 
where CSS4 variables have the advantage over their 
preprocessor counterparts. It’s completely possible to 
change the value of variable by the user at any time. 

In this tutorial, a few different use cases are going to be 
explored. The first just being for the designer to change 
the colour in one variable and see every instance of it 
updated to keep consistent colour. This is a great feature 
because it’s easy to experiment with ideas more. The 
second will be to contro! the widths of elements and just 
update the width in media queries for different sized 
screens, meaning the only change is a variable. Finally, 
the third way to use it will be to create two themes and let 
the user switch between them. 

Here, three variables can be changed that completely 
updates the design on display in the web browser. 


1. Declaring CSS variables 
Open the ‘start’ folder in your code IDE and launch the 
‘style.css file for editing. The first task to perform is to 
declare some CSS variables that will control some of the 
colours within our design, which will make it very easy for 
a designer to experiment with colours. The following lines 
declare three variables to the whole page. 
:root { 

--primary: #ff368b; 

--secondary: #0098ac; 

--tertiary: #FQ6DQ6; 
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2. Applying the colours 
Applying these colours to elements is very easy. In your 
code find the ‘info.primary’ class, which should be on line 
81. Replace the existing border-top colour with the 
variable as shown here. Repeat the process for the class 
‘info.secondary’. This time the variable for the secondary 
colour is used instead. 
.info.primary { 
border-top: 8px solid var(--primary) ; 
} 
.info.secondary { 
border-top: 8px solid var(--secondary) ; 


I 


3. Different colours 


Now the tertiary colour is added to the ‘info.tertiary’ class. 


That has now used all three colours controlled by a 
variable. At present there’s no benefit to using this but it’s 
possible to use those colours in other contexts such as 
the background colour in links - as shown here. 
§ .info.tertiary { 
border-top: 8px solid var(--tertiary) ; 
Bs 
a.primary { 
background: var(--primary) ; 


} 
4. Linked in 


Now the remaining secondary and tertiary links are also 
styled with the relevant background colours by replacing 
their existing colour formatting with the colours from the 
variables. Now is a good time to save this file and just 
make sure your browser is supporting CSS variables. Do 
this by opening the ‘index.html page and checking the 
colours are there. 
a.secondary { 
background: var(--secondary) ; 
b 
a.tertiary { 
background: var(--tertiary); } 
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5. Text colours 
Let's target the text colour now by finding the class ‘span. 
primary. Again this class is given the appropriate primary 
variable. As you can see, when colour is being used 
consistently to theme up elements, controlling from one 
variable is incredibly powerful. 
span.primary { 
font-weight: 620; 
color: var(--primary) ; 


} 
6. Outlining the benefit 


Add the variable to the code shown here and then save 
your CSS. lf you return to the code added in step one and 
change the colours, you will see it consistently change 
with the elements that have been styled up that way. 
span.secondary { 
font-weight: 620; 
color: var(--secondary) ; 
} 
span.tertiary { 
font-weight: 620; 
color: var(--tertiary); } 


Declaring in the root 


By declaring variables in the root, they are 
globally accessible by any object. If you declared 
a variable in a style applied to an element, only 
itself or children would be able to access it. 


Left 

The start of the project has a finished website design, but 
the tutorial will control many of the colours and widths 
using CSS variables 


Top 

Controlling multiple elements by the same colour variables 
mean that it is easy to update colours in a website when it 
has otherwise needed a CSS preprocessor 
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7. Going responsive 

At present the design is not responsive so let’s set up a 
way to do that and use a CSS variable to control the width 
of the card layout. This means all that needs to be 
Updated in media queries is the width variable. Add the 
width variable to the code you had in step 1. 

BH --width: 25%; 


8. Boxing clever 
Now find the ‘box’ CSS class, where the width is being 
calculated from 25% minus 40 pixels. Remove the 
‘25% and replace it with the width variable. This can 
now be controlled dynamically by changing the width 
CSS variable. 
.box { 
float: left; 
width: calc(var(--width) - 4px); 
margin: 2px; 
box-shadow: @ 2px 8px rgba(@, @, @, @.5); 
background: #ccc; 
color: #666; 
} 


9. Break point 
Placing a media query into your CSS at the end of the 
CSS gives us the kind of mid-sized screen that is often 
found on tablets. Here the root section of CSS is updated 
to have the width set to 50% and therefore give us a 
two-column card layout that would better suit that sized 
screen. Resize your browser to see it switch. 
@media (max-width: 96@px) { 

:root { 

--width: 50%; 

in) 


Changing via 
JavaScript 


It’s possible to update the CSS variables via JS as a 
quick way to update many items at once. It shows 
off the runtime power of CSS variables. 


Right 

By controlling the width property 
using a CSS variable, the variable is the 
only thing that needs updating when 
making a break point media query for 
tablet screens 
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10. Mobile friendly 


The final breakpoint will be for devices that are less than 
500 pixels, such as mobile screen sizes. Here the width 
variable is updated to take full advantage of the full width 
of the display in order to be able to see the card content. 
Again save this and resize your browser to see the display 
update when a smaller screen size is Used. 
@media (max-width: 5@@px) { 

:root { 

--width: 100%; 

My 
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Leverage agile frameworks to provide a robust 
synopsis for high level overviews. Iterative approaches 
to corporate strategy foster collaborative thinking to 
further the overall value proposition. 


11. Creating colour themes 

The next part of the tutorial will focus on using JavaScript 
to dynamically alter the CSS variables to create different 
colour themes for the page. To get started some new 
variables need to be declared in the ‘root’ of the CSS... 

I --main-bg: #fff; 
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12. Changing to variables 
Now various elements will start to get these variables 
added in order to control the theme of the page. Find the 
‘main-header’ class and change the colour and 
background colour to be controlled via variables added in 
the previous step. 
.main-header { 
color: var(--main-type) ; 
background-color: var(--alt-bg) ; 
text-align: center; 
padding: 15px @ 1px Q; 
box-shadow: @ 2px 8px rgba(@, @, @, @.5); 
} 


13. Styling buttons 


Find the ‘buttons class. This time the variable will be the 
main background colour, whereas the header used an 
alternative background colour. By having two different 
background colours it allows the content to have some 
contrast as they are viewed. Controlling the text colour 
means that a high contrast text can be added. 

.button { 

text-decoration: none; 
padding: 5px 1px; 
color: var(--main-type) ; 
background-color: var(--main-bg) ; 
font-family: ‘Barlow Semi Condensed’ , 
sans-serif; 
font-weight: 620; 


} 
14. Footing the bill 


Now move to the class that controls the footer - ‘main- 
footer. As with the header this will also have an alternate 
background colour so that it will stand out from the 
remainder of the page. The colour is also changed so that 
it will be visible. 
i .main-footer { 

clear: both; 


2 new features added 
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padding: 2Qpx; 

text-align: center; 
background-color: var(--alt-bg); 
color: var(--main-type) ; 


} 
15. Body building 


The next part of the page to be targeted is the body 
element, so find the appropriate CSS that controls the 
look of this. The background will now be controlled by the 
main background CSS variable to give global contro! to 
the variables. 
body { 
margin: Q; 
padding: Q; 
font-family: “HelveticaNeue-Light” , 
“Helvetica Neue Light”, “Helvetica Neue”, 
Helvetica, Arial, “Lucida Grande”, sans- 
serif; 
font-weight: 300; 
line-height: 1.4em; 
background: var(--main-bg) ; 


} 
16. Box fresh 


The ‘box’ CSS is going to be updated now, so find the 
code for this and change both the background colour 
and text colour to have control from CSS variables. Save 
this CSS page and just check the page has updated in the 
browser. Now move into the ‘index.html page. 
.box { 

fleate Lert; 

width: calc(var(--width) - 4px); 

margin: 2px; 

box-shadow: @ 2px 8px rgba(@, @, 0, 2.5); 


Support Wa Patron 


UC Browser for 
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Android 


Samsung 


* 
Opera hini 
Internet 


iOS Safari ‘ 


Site links Legend 


| background: var(--alt-bg) ; 
| color: var(--main-type); } 


17. Adding buttons 


In the ‘index.html! page find the main header section and 
just after the heading two tag, some content will be 
added. Just to help you locate this in the code we've 
Shown where the code will go with the HTML comment 
in this step. Once you've found it add the code in the 
next step. 

<div class=”main-header”> 

<h2 class=’title”>Make Me Hungry</h2> 

<!--Code Goes Here--> 

</div> 


18. Span and chips 
The span is added to the page. This gives the instruction 
to change the theme. Two buttons are placed after this, 
and they will talk to the JavaScript to update the CSS 
variables so that they switch between light and dark. 
<span>Choose Theme <a href=”#” 
class="button” onclick=’light() ;”>LIGHT</a> 
<a href=”"#” class=’button” 
onclick=”dark() ;”>DARK</a></span> 


19. Stick to the script 


The code here should be added right before the final 
body tag of the page. The code in the remaining two 
steps will be placed inside these script tags. This function 
will be used to set a specific CSS variable with a value 
dynamically. Change it at run time via user control. 
§ <script> 

function setDocumentVariable(propertyName, 

value) { 
document.documentElement. style. 


Is it safe to use 
CSS variables? 


As with any relatively new web 
technology the question every 

web designer wants to know is: 
“what’s the support like?”. The great 
news if you visit www.caniuse. 
com is that currently most of the 
major browsers support this, the 
exceptions being IE, Opera Mini and 
UC Browser for Android. 

So allinall this has very good 
support from the main desktop and 
mobile browsers at just under 79% 
browser support globally. As always 
whether you can use this depends 
on who your audience is. 

If you need to know more about 
CSS variables then the Mozilla 
Developer Network has good 
documentation on this, and it’s easy 
to understand (https://developer. 
mozilla.org/en-US/docs/Web/ 
CSS/Using_CSS variables). A more 
in-depth look at CSS variables, 
featuring a good description of why 
you would want to use them can be 
found on Medium (https://medium. 
com/dev-channel/css-variables- 
no-really-76f8c91bd34e). 


setProperty(propertyName, value); 
ne 


</script> 


20. Going dark 


When the user clicks the ‘dark’ button the function here 
will be called. As you can see it sets three variables with 
new values and these update the page immediately, 
changing the theme. Save this and try the button in your 
browser to see the theme change. 
function dark() { 
setDocumentVariable(‘--main-bg’ , 


‘#918d82’ ); 
setDocumentVariable(‘--alt-bg’ , 

‘#57534c’); 
setDocumentVariable(‘--main-type’ , 

‘#ddd’ ); 

3 


21. Seeing the light 


The final step is to add the functionality for the ‘light’ 
button. This switches the colours back to the regular light 
colours of the page. Save your work and refresh your 
browser to see the update take effect. Now you can 
switch between themes just by updating three CSS 
variables that, in turn, control many other elements on 
the page. 
function lightQ { 
setDocumentVariable(‘--main-bg’, ‘#fff’); 
setDocumentVariable(‘--alt-bg’ , 
HT OESTS” ys 
setDocumentVariable(‘--main-type’ , 
530): 
iT 
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10 BEST STATIC SITE GENERATORS 


ost sites you visit on the web are 
probably generated dynamically 
- that is, rather than having all of 
their content encoded into the HTML 
stored on the server, they retrieve 
content from a database and 
construct pages to serve to you on 
the fly. Many also provide user 
interactivity through logins, forms and 
so on. Think of Facebook for an 
example of both of these things. 

To build this type of functionality 
yourself, you might look to a CMS 
Such as WordPress. 

For some use cases, however, this is 
overkill. Simple pages, such as a 
personal profile, information about a 
business, or even a blog really dont 
need this sort of overhead or 
complexity. You could of course just 
build static HTML yourself in a text 
editor, and indeed, many years ago 
this was how all sites were built, but 


" PERFORMANCE 
WILL BE GREATLY 
IMPROVED” 


this rapidly becomes cumbersome to 
maintain when you want to scale up 
or make changes. Static site 
generators offer a solution to this, by 


enabling you to build static HTML As = ; | : ai ae 1“ ey 
pages using templates. / 5 fe Or ae 
Essentially, static site generators are ~~ Stati ell YOUF pai) ) text int 
Wit 


command-line tools which shift the sites 5 dnd 


creation of the final HTML page ss Static 
forward from the point the user a a Me ere Blog-aware 
requests it to the point you write the Ee i Feral 
content. When you make an update, 
you build the new page which can 
then be served as-is to every user who 
requests them. This offers several 
advantages. Performance will be 
greatly improved compared to a 
dynamic site, since serving static 
HTML and CSS has a very low 
footprint. Your server-side setup will be 
much simpler, which also means fewer 
security worries. Conversely, however, 
you'll lose the opportunity to deliver 
real-time content or receive user input. 

Static site generators have exploded 
in popularity in recent years, SO 
navigating the wide range of choice 
can be difficult. Here, we've taken a 
look at some of the best options you 
Should be considering. 


C b/ Jig 7S 
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| : https://jekyllrb.com 


PRO . Jekyll is one of the oldest 


static site generators out there, 
and still the most popular 


First released in 2008 by Tom 
Preston-Werner, the co-founder of 
GitHub, Jekyll arguably popularised 
the concept of static sites and remains 
probably the most widely used static 
site generator. With Jekyll, you'll 
typically work with content in 
Markdown, a lightweight markup 
language designed for text formatting. 
The Liquid templating engine is used 
to place this Markdown content into a 
HTML template, and to combine 
templates representing various parts 
of a page (say, header, footer and 
content) in a modular and re-usable 
manner. Support for Sass is built in for 
those with a preference for CSS 
preprocessing, and it'll play fine with 
libraries like Bootstrap. Also included 
with Jekyll is an HTTP server which 
can be used to easily deploy and test 
your static pages locally. 


One of Jekyll’s key selling points is 
its wide range of ‘importers, which 
enable an existing site to be migrated 
to Jekyll with relative ease. If you have 
a WordPress site, for example, you can 
Switch to using Jekyll using one of the 
importers. It’s also trivial to convert 
existing static HTML sites to Jekyll, 
which can be great if you've been 
coding static HTML yourself or see a 
template you like the look of. 

Notably, Jekyll is used to power 
GitHub pages, a static site hosting 
service which is provided with GitHub. 
If you have a GitHub repository, you're 
able to create a GitHub pages site for 
free using Jekyll. This can be a 
convenient way to give a polished 
landing page to your GitHub project. 

The big downside of Jekyll - and 
this applies to most generators - is 
that it can seem complex at first and is 
a new technology to master. You 
might not be up and running as 
quickly as with a CMS. However, it’s 
very well documented and the 
learning curve is quickly overcome. 
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A fast, simple & powerful blog framework 


} pe install hese-cli -g al 


PRO : Focused on blogging, 
Hexo is fast to get started and 


simple to use, especially for 
JavaScript developers 


feature 
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PRO . Gatsby uses some of the 


latest web technologies such as 
React to create static PWAs 
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The world’s fastest framework for 
building websites 


https://gohugo.io 


PRO . Aims to be the fastest static 


site generator. Hugo is the other 
big hitter alongside Jekyll 


Widely regarded as the ‘other leading 
Static site generator, it’s only natural to 
compare Hugo with Jekyll. Hugo is the 
newer of the two, and one of its key 
focus areas is speed, which for some 
has been a complaint with Jekyll. 
Nobody likes waiting for a site to build, 
and Hugo can put together a simple 
site from your markup and templates 
in milliseconds, or even blaze through 
thousands of pages in seconds. 


With Hugo it’s also typical to write 
content with Markdown, and the 
templating engine is based on Go 
templates since Hugo itself is 
implemented in the Go programming 
language. Like Jekyll, it ships with a 
lightweight HT TP server to quickly 
serve your pages locally. The two 
tools’ build workflows are overall 
fairly similar. 

For many, the key benefit of Hugo is 
its quicker, simpler path to getting 
Started, with very little need for 
configuration and no dependencies 
other than the core binary. Its 


| documentation and tutorials are very 
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good, and it has an ethos of 
maintaining simplicity which makes for 
a very approachable learning curve. 

One disadvantage Hugo has relative 
to Jekyll is that it lacks the extensive 
plugin ecosystem available for the 
latter. Given its wide range of built-in 
functionality, however, this is unlikely 
to be a problem for most users. It also 
may be marginally lighter on support 
on sites such as StackOverflow since it 
hasn't been around as long; however, 
it continues to grow in popularity and 
many believe it may become the 
leading static site generator in the 
near future. 
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b | N 1 XT https://nuxtjs.org 


PRO - Use NUXT to take 


advantage of Vue.js for your 
Static sites 


Vue js has gained immense popularity 
as a frontend framework in recent 
years, due to its combination of a 
gentle learning curve, high 


performance and powerful feature set. 


Nuxtjs is actually a framework for 
creating server-rendered Vue 
applications - that is, dynamic pages 
which are rendered by the server 


Miers tems Userdhede = About = 


Pella Decora 


Overview 


before being passed in their 


completed form to the client to display. 


However, it can also be use to build 
Static sites, with a command line 
parameter that will build static 
HTML pages for all routes through a 
Vue project. 

Since Nuxt is a Vue framework, 
familiarity with Vue will be necessary 
to use it, but developers who have 
worked with Vue before will feel right 
at home. And, like Vue, it also brings a 
component-based approach to 
development of your sites. 
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PRO : Pelican is a highly popular 


Static blog generator built in 
Python 


Pelican supports content written in 
multiple languages, including the 
ubiquitous Markdown. It uses the Jinja 
templating engine, which is both easy 
to use and extremely powerful, 
meaning that while Pelican is primarily 
optimised for building blogs, it is also 
well suited to building a wide range of 
different types of other sites. It’s also 
fast, and can comfortably handle sites 
with thousands of pages without 
making you wait for them to build. 
Like many of the leading static site 
generators, Pelican allows you to 
import your site from a variety of 


blogging platforms. This makes it 
trivial to convert an existing site built 
with WordPress or many other 
popular content management 
systems. If youre familiar with 
Python, and especially if you've used 


# Pelican 
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Pelican 3.7.1 


Features 
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A Nuxt 


Universal Vue.js Applications 


oN 


6. M KD 0 [ S Www.mkdocs.org 


PRO :MkDocs might well be the 
easiest way to create websites for 
project documentation 


MkDocs is more specialised than the 
tools we've looked at up until now. It 
sets out with one very simple 
objective in mind: to provide a fast 
and easy-to-use way to generate 
HTML sites for project 
documentation. And it absolutely 
succeeds at doing this. It’s built in 
Python, so you'll need Python and 
pip (Python package manager) 
installed to get it. 


Jinja templates before, Pelican is a 
very Safe choice. 

Conversely, however, it may be a 
little harder to get to grips with for 
developers who are more familiar with 


| JavaScript or Ruby. 


J 


Pelican is a static slbe generator, writen in Python, Highlights inchucte: 


« Wire your content direct with your editor of choice in reSiruciured test of Markdown formats 
® Includes a simple CLI tool to [reigenerabe your site 

. Easy to interface with distributed version contra’ systems and web hooks 

« Completely static output is easy bo host orywhere 


Ready to pet starbed? Check out the Quickstart guide. 


® Articles [eg., blog posts) and pages e.g, “About’, “Projects”, “OComtact”) 
« Cones, Wie an @cbernal service (Disqus) If you preter to have more coninal ower your 
comment data, self-hosted comments are another option. Check out the Pelican Plugins 


After that, getting started is easy. 
Documentation is written in 
Markdown, and the tool is 
configured using a single YAML file. 
The command-line build process is 
as simple as it could be. 

The MkDocs GitHub page 
includes a number of themes which 
are specially designed for 
documentation, or you can build 
HTML for your own theme. 

MkDocs is one of the easiest 
static site generators to get started 
with, and if documentation is your 
use case, there really isn’t much 
cause to look at other tools. 


" WHILE PELICAN IS 
PRIMARILY 
OPTIMISED FOR 
BUILDING BLOGS, IT 
IS ALSO WELL- 
SUITED TO BUILDING 
A WIDE RANGE OF 
DIFFERENT TYPES OF 
OTHER SITES ” 
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9, METALSMITH 


PRO : Metalsmith is an extremely 


simple tool where all functionality 
is provided by plugins 


Metalsmith takes a different approach 
to many other static site generation 
tools, in that it doesn't try to do very 
much at all. Essentially, static site 
generators take a set of source files, 
manipulate them, and then generate a 
set of output files which is the static 
Site itself. Metalsmith provides a 


METALSMITH 


1 


DaTaLac, 


WELCOME 


ww.metalsmith.io 


WWW.Meralsmiin.ta 


framework for doing this, but leaves all 
of the actual manipulations to plugins. 


These manipulations are things which 
typically come out of the box with 
other static site generators, such as 
utilising templates, substituting 
variables, or interpreting languages 
like Markdown. 

When run through Metalsmith, all 
source files are converted to 
JavaScript objects, which means that 
manipulations by plugins are 
essentially modifications to properties 


Build static websites 
with an easy-to-use framework 


gem install middleman 


PRO : Middleman has been 
around for a long time, and is 


designed with more complex 
sites in mind 


Middleman was released around the 
Same time as Jekyll, and will be most 
familiar to developers who have 
worked with Ruby on Rails. Its default 
template engine is ERB (Embedded 
RuBy) and it also includes builtin 


MIDDLEMAN sesemenu 


Support for Haml, Sass, SCSS and 
CoffeeScript, and can be extended 
further to support more. 

Some leading static site generators 
are heavily geared towards blogs, but 
Middleman sets its ambitions wider 
and aims to provide the flexibility to 
develop any type of site. It’s highly 
unopinionated and extensible. This 
means, if all you are doing is a blog, 
the setup is a little more complex 
since you'll have to configure it. 
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* METALSMITH 15 
IMMENSELY 
CUSTOMISABLE, 
BUT REQUIRES A 
LITTLE MORE 
CONSIDERATION 
DURING SETUP ” 


of these JavaScript objects. There is, 

for example, a markdownQ plugin 

which transpires Markdown to HTML. 
The result of this approach is that 


Metalsmith is immensely customisable, 
but requires a little more consideration 


during setup than some of the more 
monolithic tools. Don't like Jekyll’s use 
of the Liquid templating engine? Here 
you can pick your own. On the 
Metalsmith page, you'll find a lengthy 
list of plugins to provide a wide range 
of functionalities, ranging from 
compiling Sass to CSS through to 
computing a word count. 

If you have a preference for 
unopinionated frameworks, 
Metalsmith is about as unopinionated 
as you can get. 


10. SPIKE... 


| PRO - Spike is the spiritual 
successor to Roots, a popular 
static site generator that is no 
longer maintained 


Spike is built by the same team as 
Roots, which saw great popularity 
while it was actively maintained. It 

| provides a familiar ecosystem for 
JavaScript developers, utilising 
webpack, Postcss, Reshape and 
Babel. Much like Metalsmith, Spike 

| is designed to provide a very 
simple framework and allow 
plugins to handle your 
transformations. 


HONOURABLE 
MENTIONS 


THERE ARE MANY MORE STATIC SITE 
GENERATORS OUT THERE. HERE ARE A FEW 
MORE WHICH ARE WORTH A LOOK 


OCTOPRESS ¢ 
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OCTOPRESS tttp-octonress.org 
Octopress is a framework for 
Jekyll which tailors specifically 
for blogging, and bundles a 
number of commonly-used 
plugins. If you like Jekyll’s style, it 
may take some of the setup work 
off your hands. 


Make an extremely safe, fast and stylish static 
blog wensite in minutes. 
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PUBLII https://getpublii.com 

If you don’t want the trouble of 
setting up a command-line tool, 
Publii is a desktop application with 
GUI designed to develop static 
sites. Think of it like a CMS that 
sits on your local machine rather 
than a server. 
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HAKYLL https://jaspervdj.be/hakyll/index.html 
Someone made a Haskell library 


for static site generation? It might 
not be that widely used, but fans 
of Haskell (and there are many 
around) will love this. 
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Developer tutorials 


Automate your 
workflow with Gulp 


Learn how to remove the nuisance of repetitive and 
mundane tasks with the help of Gulp, a Node.js task runner 


DOWNLOAD TUTORIAL FILES 
80 tutorial www-filesilo.co.uk/webdesigner 


n today’s web development world, building a 
modern, complex website which supports a 
variety of devices, both old and new, often 
constitutes a lot of work. Much of this work 
involves small, repeated tasks such as minifying 


JavaScript, optimising images, or compiling SASS. 

While these types of tasks are useful, they also have to 
be performed again and again every time the code is 
changed. Understandably, this quickly grows repetitive, 
and eventually, it can be tempting to just ditch them 
altogether and spare yourself the headaches. 

Thankfully, this is an issue we can solve. The solution 
comes in the form of Gulp, a popular task runner which 
enables us to automate these types of mundane, time- 
consuming tasks through the use of Node js streams, 
leaving Us free to focus on the important stuff. 

In this tutorial, were going to create a basic build 
system using Gulp, which compiles and optimises a small 
project and its assets. To get started, download the 
project files from Filesilo and open ‘website-template’ in 
your favourite text editor. Then in Terminal, CD into 
‘website-template’ and run ‘nom install’ to install the initial 
project dependencies. Let's begin. 


1. Install Gulp 
We first need to install Gulp as a project dependency, and 
then its command line interface (gulp-cli), by running the 
commands below in Terminal. The latter will enable 
Terminal to recognise any commands beginning with 
‘gulp, making it possible for us to actually run the tasks 
we'll be building in this tutorial. 

npm install gulp-cli -g 
| npm install gulp -D 


2. Create gulpfile.js 

Gulp searches for tasks in a JavaScript file called ‘gulpfile. 
js. Let’s create one in the ‘website-template’ directory, and 
then in it, copy the contents of ‘support-files/step-2.txt’ 
from the Filesilo package. This gives us a basic structure 
SO we Can organise our code. 


The first thing we need to do in the gulpfile is import 
Gulp itself as a dependency. This can be done by adding 
the code below under the “Set Dependencies’ header. 
We'll use an ES6 const declaration for this and other 
imports since we wont be needing to reassign them. 

Be const gulp = require(‘gulp’); 


3. Project directory structure 
When building a gulpfile, it's worth remembering that 
we may want to reuse it in future projects. These 
projects may all have different directory structures, 
which means we would then have to go through each 
Gulp task and edit the paths accordingly. Let’s spare 
our future-selves this inconvenience and declare our 
directory structure in reusable variables which can 
be easily changed. Add the declarations below under 
the Options header. 

const dev = ‘dev’; 

const dist = ‘dist’; 

const htmlDev = ‘${dev}/html* ; 

const htmlDist = dist; 

const imgDev = ‘${dev}/img*; 

const imgDist = ‘${dist}/img* ; 

const sassDev = ‘${dev}/sass‘° ; 

const sassDist = ‘${dist}/css'°; 

const jsDev = ‘${dev}/js°; 

const jsDist = ‘${dist}/js‘; 

const dataDev = *‘${dev}/data' ; 


4. Minify variable 


Next, again under the Options header, create a new 
variable called ‘minify’ and set its value to ‘true’ This will 
be used by some Gulp tasks to tell them if they should 
minify the compiled code. 

What minification does is remove all unnecessary 
characters such as whitespace and line breaks from the 
code without changing any of its functionality. This in 
turn, reduces its filesize, making it load a little faster in 
our end user's browser. 

I const minify = true; 


Plugins Twitter Contribute 


Developer tutorials 


5. IF statements and file renaming 
By having a minify boolean in our build system which can 
be changed, we thus have to account for two differing 
scenarios in our Gulp tasks: One where we want Gulp to 
minify our code; and one where we dont. 

To help us define this logic, we will install two new 
dependencies. The first is called gulp-if, and enables us 
to integrate simple ternary operators into our Gulp 
streams. The second is called gulp-rename, and simply 
enables us to rename files. Run the command below in 
Terminal to install these: 

BH npm install gulp-if gulp-rename -D 
Then import them into our gulpfile by adding this code 
under the Set Dependencies header. 
const rename = require(‘gulp-rename’ ) ; 
| const gulpif = require(‘gulp-if’); 


6. Creating our first Gulp task 

As our Gulp tasks run, files will be taken from the 
specified ‘dev’ directory, processed, and then deposited 
into the specified ‘dist’ directory. To make sure no leftover 
files from previous builds can break things, we should 
delete any existing ‘dist’ directory first. To do this, we'll 
build our very first Gulp task. We'll require another 
dependency called ‘del, which can be installed using 

the command below. 

— npm install del -D 

Then add it to our list of dependency imports. 

H const del = require(‘del’); 

Now, beneath the task’s header, let’s use the ‘gulp’ object 
we defined back in Step 2 and call its ‘taskO’ method. This 


It’s just JavaScript 


Remember, Gulp is running on JavaScript, so we 
can use all the usual suspects like conditional 
statements and loops to enhance our tasks. A 
very simple example is using ‘console.log’ to 
print feedback, but we'll also be using more 
complex ‘map’ functions soon enough. 


S$ gulp —help 


Options: 
-helo, —fh 
—Version, —-¥ 


—Trequire 


——gulpfile 


Left 
If you'd like to learn more about Gulp, you can visit its 
homepage at www.gulpjs.com. 


Top 
With ‘gulp-cli’ installed, you can also type ‘gulp --help’ in 
Terminal to see what other commands are available to you. 
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method accepts two parameters, a task name and a 
function specifying what it should do. In the function, we 
then simply tell it to delete the directory we've assigned 
to the ‘dist’ variable using the ‘del’ function we've just 
imported. In the snippet, there's also a helpful emoticon- 
powered ‘console.log’ which will send feedback to the 
Terminal. The first of many. 
gulp.task(‘deleteDist’, function(){ 
console.log(‘Deleting old ‘${dist}’ 
directory ‘); 
return del(dist); 
a; 


7. Compile SASS with Gulp - part 1 
As mentioned, Gulp can be used with the preprocessor 
SASS to automate the compiling of SCSS files into CSS. To 
do this, we'll be installing more dependencies. ‘gulp-sass’ 
is a gulo wrapper for node-sass. ‘gulp-sass-glob’ enables 
us to use globbing patterns in our SASS to import many 
files at once using wildcard characters (See /dev/sass/ 
main.scss’). Finally, ‘gulp-autoprefixer adds vendor 
prefixes to the compiled CSS based on browser usage 
data. Add them all in the usual manner, as below. 

npm install gulp-sass gulp-sass-glob 
| gulp-autoprefixer -D 
Then add it to our list of dependency imports. 

const sass = require(‘gulp-sass’ ); 

const sassGlob = require(‘gulp-sass-glob’ ); 

const autoprefixer = require 

(‘gulp-autoprefixer’ ); 


8. Compile SASS with Gulp - part 2 


Now we've installed the SASS dependencies, create a new 
task called ‘sass. Within it, use Gulp’s ‘srcO’ method to grab 
all the SCSS files from our root ‘sassDev directory, and 


Running tasks 


At any point in this tutorial, if you need to test that a 
Gulp task is working correctly, run it by typing ‘gulp 
my-task-name’ in the Terminal. 


Above 

When you run ‘gulp dev’ in the Terminal after finishing the 
tutorial, you should see the results of the build process in 
the Terminal, including the feedback we've been adding 
via ‘console.log’ statements. 


Right 

Since the ‘serve’ task has created a local server, you'll also 
see the finished result running live at the localhost port 
mentioned in the Terminal. This is typically ‘localhost:8000’. 
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then — using Node’s ‘pipeO’ method — pass them to 
sassGlob so their own SASS imports can be parsed in 
preparation for compile 
gulp.task(‘sass’, function(d) { 
console. log( ‘Compiling SASS ’) 
return gulp.src(‘${sassDev}/*.scss*) 
. Pipe (sassGlob()) 
ip 


9. Compile SASS with Gulp - part 3 


Next, pipe our stylesheet to gulp-if, which looks at the 
truthiness of the minify variable from Step 4, and then 
compiles the SASS either in a compressed (AKA minified) 
State or an expanded state. Let’s then pipe the compiled 
CSS to the rename dependency, which will add a ‘min’ 
filename prefix if required. 

.pipe(gulpif(minify, sass({outputStyle: 

‘compressed’, precision: 8}), sass 


({outputStyle: ‘expanded’, precision: 8}))) 
.pipe(gulpif(minify, rename({ suffix: ‘.min’ 
seb), 


If ‘minify’ is true, we'll have a stylesheet called ‘main.min. 
css’ in the Node js stream. If there were compile errors, it’s 
important that we print these to the Terminal with the 
‘onQ’ method. Pipe the stylesheet to autoprefixer for 
vendor prefixing, and then finally send it to gulp’s ‘destQ’ 
method, which places it in the correct ‘dist’ directory, as 
defined back in Step 3. 
.on(‘error’, sass.logError) 
.pipe(autoprefixer ({ 
browsers: [‘last 2 version’ ], 
cascade: false 


$)) 
.pipe(gulp.dest(sassDist) ) 


10. Implementing UnCSS 

With Gulp, we can also leverage a powerful plugin called 
UnCss, which analyses HTML files and then removes any 
unused styles from our CSS. Among other advantages, 
this is great way to reduce stylesheet file sizes. AS usual, 
install the dependency like so: 

t! npm install gulp-uncss -D 


Then add UnCSS to our list of dependency imports. 
const uncss = require(‘gulp-uncss’ ); 
Now create a new Gulp task called ‘uncss’ and grab any 
CSS files from the ‘sassDist’ directory using ‘srcQ”. Next, 
after piping these to UnCSS, we have to tell the plugin 
where our HTML is located so that it can be analysed, 
before sending the edited CSS files back to ‘sassDist’ 
using the ‘destO’ method. 
gulp.task(‘uncss’, function() { 
console. log( ‘Removing unused CSS ’) 
return gulp.src(‘${sassDist}/*.css* ) 


.pipe(uncss({ 
html: [*${htmlDist}/*. html * ] 
i) 


.pipe(gulp.dest(sassDist) ) 
3); 


11. Image optimisation 
Another useful thing we can automate in Gulp is lossless 
image optimisation. It requires ‘gulp-imagemin, which we 
Should install in the usual way and then include in the 
gulpfile as a dependency called ‘imagemin. Create a new 
task called ‘images’ use ‘srcQ’ to grab any bitmap images, 
and then pass these to imagemin 
gulp.task( ‘images’, function(){ 
console.log( ‘Optimising bitmaps ’); 
return gulp.src 
(* ${imgDev}/*.+(png| jpg] jpeg | gif) *) 
.pipe(imagemin(L 
imagemin. jpegtran({progressive: true}), 
imagemin. optipng({optimizationLevel: 5}) 
J, { verbose: true })) 
.pipe(gulp.dest(imgDist) ) ; 
i; 


12. Bundling JavaScript - part 1 

If you open /dev/js/mainjs you'll see ‘require’ statements, 
which import project functionality. We can automate the 
bundling of these into one concatenated, minified file 
using Browserify. Using Babelify, we can also auto 
transpile any ES6 JavaScript into JS, which older browsers 
can understand. Let's install some dependencies. 


Car Lease Prices 


February 2017 


Audi 


9 cars 


From £185om 


BW 


4 cars 


Frm £235om 


SEAT 


5 cars 


From £140om 


ee oe 


Search 


gulp-css-cache-bust 


Add query to CSS for cache buster. 


gulpplugin 


gulp-css-condense 


A gulp plugin for the CSS compressor that shows no mercy 


gulp-css-flipper 


Gulp plugin for Twitter's css-flip - a CSS BiDi flipper 


gulp CSh flip ticki 


gulp-css-hairline 
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3399 plugins. 


cachebuster 


+ ——— + in — 


npm install browserify vinyl-source-stream 
glob gulp-streamify gulp-uglify babel- 
preset-es2015 babelify babel-core -D 

Then add these to our list of dependency imports. 
const browserify = require(‘browserify’ ); 
const source = require(‘vinyl-source- 
stream’); 
const glob = require(‘glob’); 
const streamify = require(‘gulp-streamify’ ); 
const uglify = require(‘gulp-uglify’); 


13. Bundling JavaScript - part 2 
Next, create a new Gulp task called ‘js and within it, use 
the glob plugin to grab all the JavaScript files in our root 
jsDev directory and return them in an array. We'll then 
loop through this using a map function, enabling us to 
process each JavaScript file individually. 
gulp.task(‘js’, function() { 

console. log( ‘Bundling JavaScript ’); 

var files = glob.sync(‘${jsDev}/*. js‘); 

files.map(function(file) { 

be 


tae 


14. Bundling JavaScript - part 3 
Within the map function, the ‘file’ variable references a 
string containing the full path of the current file (For 
example /dev/js/mainjs). If we want to rename a minified 
‘main.js in a later step to ‘main.minjs like within the SASS 
task, we will need its base filename ‘main’ Let's filter out 
the path information which isnt required, by adding the 
Snippet below to the map function. 

const filename = file.replace(‘${jsDev}/*, 

ey, 


.replace(‘.js’, ‘’); 


15. Bundling JavaScript - part 4 
Next, let's send the file to Browserify through the 
transform function so it can be bundled and its ES6 
transpiled. The vinyl-source-stream dependency is 
then used to send the file back Using Gulp so it can be 
renamed if minify is ‘true’ Finally, if minify is true, we run 
the bundled file through uglify to minify it and then send 
it to the jsDist’ directory. 
return browserify({entries: file}) 
.transform(‘babelify’, {presets: 
[‘es2015’ ]}) 
. bundled) 
.pipe(source(file)) 
.pipe(gulpif(minify, rename({ 
dirname: ‘’, 
basename: filename, 


? 


suffix: ‘.min’, 
extname: ‘.js’ 
}), rename ({ 
dirname: ‘’, 
basename: filename, 


? 


extname: ‘.js 
ID) 
.pipe(gulpif(minify, streamify(uglifyQ))) 
.pipe(gulp.dest(jsDist)); 


16. Setting up Nunjucks 

One thing possible to automate with Gulp is static site 
generation. In this project, a templating language called 
Nunjucks will be used to generate HTML files from 
templates using car data in a JSON file. We can see these 
Nunjucks templates for ourselves at ‘dev/html’. Install 
‘gulp-nunjucks’ in the usual way and then include it as a 
dependency called ‘nunjucks in gulpfile. Next, create a 
new task called ‘makes-list’ 


The Gulp 
ecosystem 
At the time of writing, there are 
3,399 plugins listed at gulpjs. 
com/plugins. This means 
there’s an incredible amount 
of potential automation we can 
apply to our workflows. Here’s 
a brief overview of some of our 
favourite plugins not featured 
in this tutorial: 
‘gulp-notify’ enables you 
to send OS notifications from 
Gulp tasks. Possible uses 
include notifying when a build is 
complete, or if there’s an error. 
‘gulp-plumber’ changes 
Gulp error handling so that 
when things break (such as 
SASS not compiling) the task 
won't quit prematurely. 
‘gulp-stylelint’ and ‘gulp- 
eslint’ bring these popular 
frameworks to Gulp, enabling 
you to automatically lint your 
SASS and JavaScript on build. 
‘gulp-git’ enables you to 
run Git commands from a Gulp 
task, so for example, when you 
complete a build, you could 
choose to commit it also. 


gulp.task(‘makes-list’, function() { 
console. log( ‘Generating homepage ’); 


boy: 
17. Import JSON data 


In the task, the first thing we'll be doing is importing the 
car data, which will feed into the static site generation. 
However, before we do even that, we first need to delete 
any leftover cache from previous builds to make sure the 
car data we're using is always up to date. If we dont, when 
we make changes to the car data in future, the outof-date 
cached version may be used by the task instead. 

delete require.cache[require. 

resolve(* ./${dataDev}/cars.json*)]; 

let config = require(‘./${dataDev}/cars. 

json’); 


18. Inject data into a single page 
Using Nunjucks, we'll make the car data available to the 
‘index.html template, enabling it to display a list of car 
makes once compiled. With the ‘srcQ’ method, grab the 
‘index.html template and then pipe it to Nunjucks. Next, 
we'll use Nunjucks’ ‘compileQ’ method to inject car data 
from the JSON we've imported to the template and then 
render it. Finally we'll send the compiled HTML to the 
‘htmilDist’ directory. 
return gulp.src(* ${htmlDev}/index. html *) 
.Pipe(nunjucks. compile ({ 
date: configL ‘date’ ], 
makes: configL ‘makes’ ] 
TD) 
.pipe(gulp.dest(htmlDist)) ; 


19. Render new pages - part 1 


It’s also possible in Gulp to generate lots of HTML files 
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from a single template. In this case, one page for each car 
make, which displays a list of available models. Create a 
new task called ‘models-list’ and grab the same car data 
file, deleting cache from any previous builds like before. 
gulp.task(‘models-list’, function() { 
console. log( ‘Generating car pages ’); 
delete require.cache[require. 
resolve(*./${dataDev}/cars.json*)]; 
let config = require(‘./${dataDev}/cars. 
json"); 


tee 


20. Render new pages - part 2 
We'll now loop through the makes from the car data 
using a map function. By default, there are three different 
makes in the car data, so the loop should run three times. 
For each one, we'll first pass the template to Nunjucks and 
inject the car data, then rename it to include the make in 
its filename before finally sending the compiled HTML to 
the ‘htmIDist’ directory. 
configL ‘makes’ ].map(function(make) { 
return gulp.src(‘ ${htmlDev}/template. 
html * ) 
.Ppipe(nunjucks. compile({ 
date: configL ‘date’ ], 
make: make.name, 
cars: make.cars 
})) 
. Pipe (rename ({basename: 
‘${make.name. toLowerCase() }-lease- 
prices* })) 
.pipe(gulp.dest(htmlDist)) ; 
Jos 


21. Automating XML sitemaps 

Next, we'll use Gulp to generate an XML sitemap based 
on our statically generated HIML pages. Typically, we 
would need one for SEO purposes, and having to update 
it every time a page is added would be a pain. Install 
‘gulo-sitemap’ and include it as a dependency called 
‘sitemap in gulpfile. 


22. Create sitemap task - part 1 
Create a new task called ‘sitemap’ and within it, use ‘srcQ’ 
to grab any compiled HTML files from the ‘Atm|Dist’ 
directory. To save a bit of processing time, we'll set the 
method's ‘read’ option to false, meaning it wont read 
each files contents, instead only registering its existence. 
gulp.task(‘sitemap’, function() { 
console. log( ‘Generating sitemap ’); 
return gulp.src(‘${htmlDist}/*.html*, { 
read: false 
) 
ioe 


23. Create sitemap task - part 2 

We need to pass the compiled HTML files to the sitemap 
plugin so they can be registered. The options we're 
configuring here largely correspond to tags within an 
XML sitemap page entry. One thing to note is that in 
places, we're using regex through the ‘replaceQ’ method. 
This removes the ‘html file extension where visible, as 
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typically, on a live web server, these wouldn't be used in 
web addresses. 
.pipe(sitemap({ 
siteUrl: ‘http://www.example.com’ , 
mappings: L{ 
pages: [ ‘xx/x.html’ ], 
changefreq: ‘monthly’, 
lastmod: Date.now(), 
hreflang: L[{ 
lang: ‘en-GB’, 
getHref(siteUrl, file, lang, loc) { 
return siteUrl + file. 
replace(/\.\wt$/, ‘’); 
J 
Tels 
getLoc(siteUrl, loc, entry) { 
return loc.replace(/\.\wt$/, ‘’); 
} 
al 
})) 
.pipe(gulp.dest(htmlDist)) ; 


24. Copy static files 


In any build system, sometimes the only thing we need 
to do with certain files is copy them from directory A to 
directory B. In this project, there’s a collection of fonts 
where we need to do just that. Create a new task called 
‘copy’, Call the ‘srcQ’ method and grab anything in ‘fonts’ 
within the ‘dev’ directory, before using the ‘destQ’ 
method to copy them to ‘dist’. 
gulp.task(‘copy-fonts’, function() { 
console. log( ‘Copying fonts ’); 
return gulp.src(‘${dev}/fonts/*x* ) 
.pipe(gulp.dest(*${dist}/fonts*)); 
ial 


25. Create a webserver 
Being able to easily create a simple web server to serve 
our project from would be a big convenience. This is 
something we can do in Gulp with the ‘gulo-webserver 
plugin, which we should install and then list as a 
dependency called ‘webserver’ in gulpfile. 
Under the Production Tasks header, add the task below. 
We'll set the plugin’s ‘livereload’ option to true, so that 
when changes are made, the page automatically 
refreshes in the browser. 
gulp.task(‘serve’, function() { 
console. log(“Serving the project ”); 
gulp.src(‘ ${dist}*).pipe(webserver ({ 
livereload: true 
Pe 
ie) 


26. Install run-sequence 

Now we have all of our tasks in place, it would be useful 
if we could run them all with one easy command, rather 
than being forced to run them individually. 

The most readable way for us to do this requires a 
plugin called ‘run-sequence. Install it in the usual 
manner and include it as a project dependency called 
‘runSequence’. Next, create a new task under the 
Production Tasks header called ‘build’. 


| gulp.task(‘build’, function() { 
3); 


27. Creating the build task 


With run-sequence, we can define whether tasks should 
run synchronously or asynchronously, which is helpful 
when one task (Such as UnCSS) depends on another 
being completed first (Such as SASS). 

Gulp comes with this kind of functionality out of the 
box in the form of task dependencies, but run-sequence 
enables us to define this behaviour in a much more 
obvious, readable way, in large tasks. Add the snippet 
below to the build task. Tasks passed on their own run 
synchronously, while tasks passed in an array all run 
asynchronously. 


runSequence ( 
‘deleteDist’ , 
[‘makes-list’, ‘models-list’, 
‘sass’, ‘js’, ‘copy-fonts’, ‘images’ ], 
L‘uncss’, ‘sitemap’ ] 


ve 


28. Dev task - part 1 

So far, we have created a build task which does exactly 
that, build the task. One issue with this is that during 
development, we'll keep having to run this or individua 
tasks as we make changes to our files, as well as serve 
our project. Let’s create another task called ‘dev’ that 
automates all of this. 

You may notice that before the task’s function, were 
adding an array mentioning the ‘build’ and ‘serve’ tasks, 
which tells Gulp to run these first. These are the same 
tasks dependencies mentioned in Step 27, and are more 
Suited to this simple use. 

gulp.task(‘dev’, L‘build’, 

function() { 
is 


29. Dev task - part 2 


Next, we'll use a method belonging to Gulp called 


‘serve’ ], 


‘watchQ” This keeps an eye on any files we pass to it via 

the first parameter, and if they change, runs the task 

passed in the second. This removes the need for us to 

manually run tasks as we develop the project. Add these 

watch tasks to ‘dev’ and that should cover everything. 
gulp.watch(L* ${htmlDev}/**/* .html* , 
‘${dev}/data/cars.json‘], 

‘models-list’ ]); 

gulp.watch(* ${imgDev}/*.+(png|jpg| jpeg| gif) ° 

,L‘images’ ]); 

gulp.watch(‘ ${sassDev}/**/x.scss*,L‘sass’ ]); 

gulp.watch(‘ ${jsDev}/**/*.js*,L‘js’]); 


30. Run dev task 


Finally, run the dev task in terminal with ‘gulp dev’ and 


L‘makes-list’ , 


watch as the project is built and a server is created at 
localhost:8000. From then on, if we change any of the 
files which are being watched, the appropriate task will 
then run and recompile your edited file 

Congratulations! You now have a build system 
powered by Gulp,js. 
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Deploy TypeScript 


with React 


While TypeScript makes coding easier, deploying it witha 
framework can be a hassle. Here’s webpack to the rescue... 


Typescript 


TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. 
Any browser. Any host. Any 05. Open source. 


DOWNLOAD TUTORIAL FILES 
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hile TypeScript brings a variety of 
advantages to the arsenal of the 
JavaScript programmer, 
transpiling (and syntax-checking) 
large amounts of TS code in the browser is ineffective. 


Sadly, an old adage teaches us that manual processes 
tend to break down over time - if each and every 
deployment takes a lot of console work, deployment 
frequency will take a hit. webpack’s automatic packing 
feature absorbs some of the heat so that when the 
pipeline is set up, transpilation is performed with minimal 
developer input. 

This, furthermore, frees up Capacity for other tasks. In 
our example, the powerful React framework is integrated 
into the webpack compilation process via a group of 
helper utilities. React’s JSX syntax is augmented via a 
proprietary language called tsx, thereby enabling tighter 
integration between React and TypeScript’s advanced 
run-time checking. 

In short, working through this tutorial demonstrates 
the creation of a workflow combining the best of both 
worlds. Save time by using React’s logic, and avoid errors 
via the enhanced syntax. If you are not a bug, there is little 
not to like here. 


1. Deploy webpack 

Seasoned Node.JS developers will not be surprised about 
the fact that the use of webpack requires its global 
installation via the nom ‘install -g command. When done, 
webpack can be invoked from your workstation’s 
command line. 


bundle your scripts 
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About Node.js® 
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Community 43 an asynchronous event driven JavaScript runtime, Node is designed to build scalable 


be done, Node will sleep. 


2. Create the scaffolding structure 
Microsoft recommends the creation of a specific folder 
structure to contain the various files constituting our 
project. When working on an Ubuntu workstation, 
simply execute the command sequence shown in a 
convenient location. 
tamhan@TAMHAN14:~$ mkdir tsreactspace 
tamhan@TAMHAN14:~$ cd tsreactspace/ 
tamhan@TAMHAN14:~/tsreactspace$ mkdir src 
tamhan@TAMHAN14:~/tsreactspace$ cd src 
tamhan@TAMHAN14:~/tsreactspace/src$ mkdir 
components 
tamhan@TAMHAN14:~/tsreactspace/src$ cd .. 


3. Create a Node.JS project 

As with all Node.JS-related programs, the next step 

involves the creation of a repository and the loading of 

the various dependencies that are needed. Simply enter 

the commands shown below to complete the creation 

of the structure. 
tamhan@TAMHAN14:~/tsreactspace/src$ npm init 
tamhan@TAMHAN14: ~/tsreactspace/src$ npm 
install --save react react-dom @types/react 
@types/react-dom 
tamhan@TAMHAN14:~/tsreactspace/src$ npm 
install --save-dev typescript awesome- 
typescript-loader source-map-loader 


2s /home/tamhan/ .npm-packages/1lib/node_modu 


> uglifyjs-webpack-pLugin@@.4.6 postinstall /home/tamhan/.npm-packages/lib/node_mo 


node Lib/post_install.js 


home /tamhan/ .npm-packages/1Lib 


network applications, in the following “hello world” example, many connections can be 
handled concurrently. Upon each connection the callback is fired, but if there is no work to 


4. Automate your 

TypeScript process 

Most developers use TypeScript via the in-browser 
transpiler or an IDE. The capabilities of the tsconfig.json 
file are less known - it allows the pre-definition of a 
compiler toolchain. Create an empty file in root folder. 


5. Populate the file 
In the next step, the TypeScript compilation process must 
be set up. Open the file created in step 4, and replace its 
contents with the ones shown accompanying this step. 
{ 

“compilerOptions”: { 

"OUCDLF?. **./d1st/, 

“sourceMap”: true, 

“noImplicitAny”: true, 

“module”: “commonjs”, 


Be awesome and 
keep Microsoft happy 


Authors of TypeScript examples like to substitute 
‘awesome-typescript-loader’ with ‘ts-loader’. This 
is bad for two reasons. First of all, ‘awesome-*’ has 
better multithreading capabilities. Secondarily, 
Microsoft’s ‘official’ guidelines prefer ‘awesome-”’. 


tamhan@TAMHAN14:~/tsreactspace$ tree -L 2 


node modules 


package. json 


3 directories, 1 file 

Left 

NPM’s graphically verbose output showcases the colour 
Capabilities of Ubuntu’s terminal emulator 


Above 
Once the packages file is created, the rest takes place 
almost completely automatically 
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Below Thanks to the use of the ‘/’ syntax, the ‘config’ file can sit above the source folders 


= package. json 


' tsconfig. json 


3 directories, 2 files 


“target”: “esd”, 
“Jsx”: “react” 
3, 

“include”: L 

7 SUC] RAR 


NF 


6. Understand the structure 

One interesting aspect of the ‘tsconfig file involves the 
use of ‘/’ A single dot represents the local folder, while .. 
represents the folder ‘above’ the current one. In our case, 
‘/dist/’ points at the dist folder below the location of the 
configuration file. 


7. Configure webpack 

As workstations age, your Node.JS config can get messed 
up. This is particularly problematic for webpack: if the 
product cant be run from your shell, install it again locally. 
Next, use the nom bin to find the folder containing it, and 
invoke it from there to get the error message shown 
accompanying this step. 


Even more options! 


The ‘Awesome TypeScript Loader’ can be 
considered the Swiss Army knife of TypeScript - 


look at its options described at https://github. 
com/s-panferov/awesome-typescript-loader to 
adjust its behaviour even further. 


Top 

If webpack cannot be 
found, re-install it and 
run it from the npm 


bin folder 48ms 


Time: 


Bottom 

Microsoft’s preferred 
arrangement does not 
work with recent 
versions of webpack 


8. Get configuring 
Create a file called ‘webpack.config,js’ in the root folder of 
the current project. Next, replace its contents with the 
ones shown accompanying this step - we will discuss 
relevant parts of the configuration file next. 
module.exports = { 

entry: “./src/index.tsx”, 

output: { 

filename: “bundle.js”, 

path: __dirname + “/dist” 

ie 

devtool: “source-map” , 

resolve: { 

extensions: [".ts’, “vtsx”, “sjs’= ". 


index.htm 


package. json 
tsconfig. json 
webpack.config.js 


3 directories, 4 files 


json” ] 

J, 

module: { 

rules: [ 

{ test: /\.tsx?$/, loader: ‘“awesome- 
typescript-loader” }, 
test: /\.js$/, loader: 
“source-map-loader” } 

] 

os 


externals: { 


{ enforce: “pre”, 


“react”: “React”, 
“react-dom”’: “ReactDOM” as 


ie 


9. Do the module! 


webpack’s packaging process can be expanded by 
loading so-called modules. Think of them like expansion 
projects for XNA‘s legendary content pipeline. In our case, 
both JS and TS files are declared to be processable. 


10. Externalise stuff 

Bundling large libraries into your webpack output is not 
sensible because browser caching and CDNs get 
disabled. Using the externals module allows you to mark 
parts of the codebase as ‘foreign, which changes the 
mode used for their inclusion. 


Above |Index.htm must stand outside of the ‘/src’ folder and its contents 


itamhan@TAMHAN14:~/tsreactspace/srcS webpack 
webpack: command not found 


itamhan@TAMHAN14:~/tsreactspace/srcS npm bin 
/home/tamhan/tsreactspace/src/node_modules/.bin 


tamhan@TAMHAN14:~/tsreactspaceS /home/tamhan/tsreactspace/src/node modules/.bin/webpack 
Hash: 8711e01e588d8432dbbb 
Version: webpack 3.10.0 


ERROR in Entry module not found: Error: Can't resolve ‘awesome-typescript-lLoader' in '/home/tamhan/ 


tamhan@TAMHAN14:~/tsreactspace/srcS /home/tamhan/tsreactspace/src/node_ modules/.bin/we 
No configuration file found and no output filename configured via CLI option. 

A configuration file could be named 'webpack.config.js' in the current directory. 

Use --help to display the CLI options. 
tamhan@TAMHAN14:~/tsreactspace/srcs J 
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Documentation tsco ntig.json 
Tutorials ww Overview 

sata ~ The presence of a tsconfig. 
Handbook 


Declaration Files = « 
Introduction Using tsconfig.json 


Library Structures 


® By invoking tsc with no input files, in which case the compiler searches for the tscon? 
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compiled in one of the following ways: 


current directory and continuing up the parent directory chain. 


By Example 


® By invoking tsc with no input files anda --proje 


Do's and Don'ts 


directory containing a tscont: 


;.j50n file,orapathtoavalid . 4s 


Deep Dive 
When input files are specified on the command line, tsconfig.json files are ignored. 
Templates 
Publishing Examples 
Consumption Example ° files: 
Project Configuration ~ ® Using the "Files" property 
STON 


11. Create an entry point 
The next step involves the creation of an application entry 
point using the structure shown accompanying this step. 
We simply load a bunch of predefined resources and 
place the file outside of the /src/’ folder in accordance 
with the tree output below. 
<!DOCTYPE html> 
<html> 
<head> </head> 
<body> 
<div id=”example”></div> 
<script src=”./node_modules/react/umd/ 
react.development.js”></script> 
<script src=”./node_modules/react-dom/umd/ 
react-dom. development. js”></script> 
<script src=”./dist/bundle. js”></script> 
</body> 
</html> 


12. Create a TypeScript file 
Displaying information in TypeScript is relatively simple 
Due to the inclusion of React, ‘index.tsx’ - to be placed 
in /src/’ - requires some additional code to include 
various modules. 
import * as React from “react”; 
import * as ReactDOM from “react-dom” ; 
ReactDOM. render ( 
<h1>Hello, world!</h1>, 
document. getElementById( “example” ) 


); 
13. Take a stab 


At this point, it is time to try and compile the project for 
the first time. If you followed Microsoft's instructions 
carefully, the error shown in the figure will pop up. 


Fortunately, the problem can be fixed by adjusting the 
folder structure (see figure). 


14. Pack it again! 

With that out of the way, adjust the path for calling 

webpack and take another stab at the compilation 

process. It will pass, yielding output similar to the one 

shown in the listing accompanying this step. 
tamhan@TAMHAN14:~/tsreactspace$ /home/ 
tamhan/tsreactspace/node_modules/.bin/ 


webpack 
oe Asset Size Chunks 
Chunk Names 

bundle.js 2.95 kB @ [emitted] 
main 
bundle.js.map 3.19 kB @ [emitted] 
main 


[Q@] ./src/index.tsx 252 bytes {@} [built] 
+ 2 hidden modules 


C} Inspector Console (» Debugger 
4 
File:// 1 
home/tamhan/tsreactspace ; 
webpack:// : 
src 6 
webpack 9 
external "React" 7 
external "ReactDOM" 12 


n file in a directory indicates that the directory is the root of a TypeScript project. The 
n file specifies the root files and the compiler options required to compile the project. A project is 


ig.json file starting in the 


t (or just -p ) command line option that specifies the path of a 
n file containing the configurations. 


Analyse 

your options 

Our discussion of 
tsconfig.json is relatively 
superficial in scope. 

The limited space in 

the magazine does 

not allow us to go into 
depth. TypeScript 
comes with literally 
dozens of options, 
most of which are 
documented in the portal 
accessible at https:// 
www.typescriptlang. 
org/docs/handbook/ 
tsconfig-json.html. Keep 
in mind that the ‘root’ 
webpage does not list 

all options. Instead, click 
the Project Configuration 
node at the left-hand side 
of the screen to reveal 
further parameters and 
fields which might be of 
interest. Finally, be aware 
that some of the options 
require the presence of 
Visual Studio - Microsoft, 
after all, wants to push its 
own IDE. 


15. Say hello 


With that out of the way, it is time to open ‘index.htm. The 
browser will load the page, and will present our simple, 
Reactbased greeting to the world. When distributing the 
finished application, make sure to include the ‘dist’ folder. 


16. Use source mapping 

One frequent criticism of TypeScript is that debugging it is 
tiresome. Browsers, after all, cannot run TypeScript 
directly. This problem is thankfully mitigated via Map files 
such as ‘bundle.js.map. They contain a data structure 
which permits correlation between the output and the 
source files. 


17. Celebrate the map file 

While many browsers demand the manual loading of the 
map file, using our Webpack output with Firefox leads to 
the output shown in the figure. This is made possible by a 
comment at the bottom of ‘bundlejs, which references 


{} Style Editor © Performance {k Memory 
index.tsx x 
import * as React from "react"; 


import * as ReactDOM from "“react-dom"; 


ReactDOM. render ( 


) ” 


‘i 


/ 


<hl>Hello, world!</hl>, 
document. getElementBylId( "example" ) 


// WEBPACK FOOTER /; 
f/f ./fsrc/findex.tsx 
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dist 
index.htm 
node modules 
package. json 
src 

tsconfig. json 


tamhan@TAMHAN14:~/tsreactspaces tree 


webpack.config. js 


3 directories, 4 files 


Above Moving the body of the Node project to the same level as the webpack ‘config’ file fixes weird problems 


the source map directly. 
/[xxx/ }) 
[xkkKKk/ ]); 


//# sourceMappingURL=bundle. js.map 


18. Create a component 
One of TypeScript’s most important features is the use 
of classes and data types. Creating a new component 
is done with a structure similar to the one shown 
below - ‘Props’ and ‘State’ can be declared using the 
‘type’ keyword. 

type Props = { ... }; 

type State = { ... }; 

class MyComponent extends React. 

Component<Props, State> { 


i 


19. Do it with interfaces 


Another way to solve the problem involves the use of 
interfaces. In this case, the syntax does not change 
Significantly - Microsoft's favourite example demos it 
via a set of string parameters passed in via the 
‘HelloProps object. 
export interface HelloProps { compiler: 
string; framework: string; } 
export class Hello extends React. 
Component<HelloProps, {}> { 
render() { 
return <h1>Hello from {this.props. 
compiler} and {this.props.framework}!</h1>; 
} 
ai 


20. Deploy the component 

With that out of the way, the component can be 
integrated into our main window as if it were a normal 
React element. 


H import { Hello } from “./components/Hello”; 
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23. Load some examples 
The TypeScript playground comes with a set of 


ReactDOM. render ( 

<Hello compiler=’TypeScript” 
framework="React” />, pre-loaded examples which can be loaded via the 
document. getElementById( “example” ) combination box on the left-hand side of your screen. In 

3 addition to various syntax samples, the product even 
contains an extremely interesting implementation of a 

21. Use advanced features ray tracer. 
Simply introducing TypeScript to your code is not ae a 


enough. Make sure to read the documentation carefully, Using Classes - 


Select... 


as to enable your developers and yourself to use the 


most advanced features found in the language standard. Classic JavaScript 


ce ee Dee pe: string) f{ 
. : | Adding Types = message: 
22. Try itout online Using Classes 
Should you ever feel like testing a bit of TypeScript, keep Using Inheritance 
" + this.greeting; 


www.typescriptlang.org/play in mind. It contains a live 
version of the TypeScript compiler running in your 


browser. Simply enter code on the left-hand side, and see 


the JavaScript output on the right. 


Od https: typescriptlang.org/ play! 


Using Generics 


Unions and Type Guards 


feter ("world"); 


Chick Start 


Donumentation Download Connect Playground 


Typescript 2.6 is now available. Download our latest version today! 


ss Greeter { War Greeter = /** @class */ (function () { 


Using Classes 


greeting: string; function Greeter(message) { 
MStructor(mssage: string) { his.preeting = message; 
this .preeting = message; } 
Greeter.prototype.greet = function () { 
greet() { return "Hello, " * this.greeting; 
eturn “Hello, “ + this.greeting; }: 
I return Greeter; 
t HOD}: 
var greeter = new Greeter("world"}; 
let greeter = new Greeter( "world"; War button = document.createElement( ‘button’ ); 
; button. textContent = "Say Hello"; 
let button = document.createElement( ‘button’ }; button.onclick = function ¢) 4 


button. textContent = "Say Hello"; alert( greeter. greet()); 
button.onclick = fumction{} { bi 
alert( greeter .greeti )}; document .body. appendthild( button) ; 


document .body .appendthildy button); 
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@) tidyhosts 


Featured host: tdyhosts 


wwwtidyhosts.com /05603 674610 


About us 


Tidyhosts has become a leading 
cloud hosting provider throughout 
the world. It boasts a feature-rich 
selection of services including domain 
registration, shared web hosting, 
WordPress hosting, hosted exchange 
email, cloud virtual servers and media 
streaming. Its passion and drive for 


What we offer 

- Domain names - Simple 
domain registration with a 
large choice of TLDs 


- Shared web hosting 
- Includes one-click 
application installers and a 
choice of Windows or Linux 


5 Tips from the pros 


1. Ensure that you choose the 
right domain 

When choosing your domain, make 
sure it’s easy to remember and 
resembles what you are offering. 
Customers are more likely to come 
back if they can remember your URL. 


2. Create clear, concise 
website content 

Keep the content on your website 
Clear, informative and, more 
importantly, relative! Avoid any 
duplication of content on different 
pages as this can affect your rankings 
on search engines. 


3. Utilise SSL certificates to 
stay secure 
More sites are moving to SSL security 
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Success has gained it a highly reliable 
and trusted reputation from its 
customers, making it the number one 
for hosting services. Founded in 2004 
by three developers who wanted to 
build hosting infrastructure for 
developers - years on, the company 
has expanded to offer much more. 


- Cloud virtual servers - Take 
full control over your hosting, 
and install the software you 
need on your server 


¢- SHOUTcast hosting - Start 
your own radio station with 
our easy to set up and use 
SHOU Icast hosting service 


to protect their customers from the 
ever-increasing threats on the web. 
Search engines are now ranking sites 
with an SSL higher than those without. 


4. Make sure you choose the 
right plan 

When you are ready to purchase 
hosting, check that you have enough 
resources, especially if you expect 
your website to grow quickly. Seek 


advice from tidyhosts if you are unsure. 


5. Use one-click installers 
when building a website 

If you are new to building a website 
then we have a number of useful 
one-click application installers. These 
help you get up and running, including 
the popular WordPress system. 


listings 


66 When you are ready to 
purchase hosting, check 
that you have enough 
resources 99 


Our SUPERIOR VPS RANGE aN i= a 
CLOUD a o SG O 


Inf Powerful V PG kage mite T AS 
Full ha aed iPad Cooreciieity incited, rai Youre lode! i... 


ier 


Testimonials 


Kelly Underwood 


** ve been with a number of web host providers in the past which have at 
some point let me down. | now realise the importance of using a host that is 
well known ” 


John Corey 
** We have our email hosted with tidyhosts, which serves a small number of 
users in our office. We have found this solution is much more cost-effective ” 


Jenny Brice 


** A great host with fantastic knowledge. | have only had to use the 
Support channels a few times, but the replies | have had helped me instantly, 
SO well worth it ” 
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fully comprehensive range of hosting 
products, services and support. Their 

highly trained staff are not only hosting 
experts, they're also committed to 
delivering a great customer experience | 
and are passionate about what they do. | 


- Co-location hosting 
- VPS 


- 100% Network uptime Budget hosting 
UK-based hosting = ONLINE__ 

| | www.hetzner.com 

ee CYBERHOST | +49 (0)9831505-0 


| Hetzner Online is a professional web 

| hosting provider and experienced data 

| centre operator. Since 1997, the company 
has provided private and business clients 


www.yberhostpro.com 
0845 5279 345 


Cyber Host Pro are committed to 
providing the best cloud server | 
hosting in the UK; they are obsessed | 
with automation. If youre looking for a | 
hosting provider who will provide you — | 
with the quality you need to help your | | 
business grow, then look no further | 

| 


than Cyber Host Pro. 


¢- Cloud VPS servers | 
- Reseller hosting q 
- Dedicated servers | 


Cluster web hosting 


Get your listing in our directory 


with high-performance hosting products 
as well as the infrastructure for the 
efficient operation of sites. A combination 
of stable technology, attractive pricing, 
flexible support and services has enabled 
Hetzner Online to strengthen its market 
position both nationally & internationally. 


- Dedicated/shared hosting 
¢« Colocation racks 
- SSL certificates 


fasthosts 


wwweasthosts.co.uk | 
0808 1686 777 | All-inclusive hosting 
UK based and operating 24/7 from | 
dedicated UK data centres. Fasthosts | 
keep over one million domains running | 
smoothly and safely each day. | 
Services can be self-managed through | www.land1.co.uk 
0333 336 5509 
| 1&1 Internet is a leading hosting 

| provider that enables businesses, 
| developers and IT pros to succeed 

online. Established in 1988, 1&1 now 


the Fasthosts Control Panel. 


- Dedicated servers 
- Cloud servers 
- Hosted email 


operates across ten countries. With a 
comprehensive range of high- 
performance and affordable products, 1&1 
offers everything from simple domain 
registration to award-winning website 
building tools, eCommerce packages and 
powerful cloud servers. 


- Easy domain registration 
- Professional eShops 
- High-performance servers 
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<> bargainhost 


www.bargainhost.co.uk 

0843 289 2681 

Since 2001, Bargain Host have 
campaigned to offer the lowest possible 
priced hosting in the UK. They have 
achieved this goal successfully and built 
up a large client database which includes 
many repeat customers. They have also 


~ won several awards for providing an 


outstanding hosting service. 


- Shared hosting 


-« Cloud servers 


« Domain names 


Value Linux hosting 


PATCHMAN 
WEB HOSTING 


patchman-hosting.co.uk 
01642 424 237 


Linux hosting is a great solution for 


' home users, business users and web 


designers looking for cost-effective and 
powerful hosting. Whether you are 
building a single-page portfolio, or you 
are running a database-driven 
eCommerce website, there is a Linux 


hosting solution for you. 


-. Student hosting deals 
_« Site designer 
_+ Domain names 


Flexible cloud servers 


elastichosts 


elastichosts.co.uk 

020 7183 8250 

ElasticHosts offer simple, flexible and 
cost-effective cloud services with 
high performance, availability and 
scalability for businesses worldwide. 
Their team of engineers provide 
excellent support 24/7 over the phone, 
email and ticketing system. 


- Cloud servers with any OS 
- Linux OS containers 


_« 24/7 expert support 
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N ORTH Northcoders 
CODER 


www.northcoders.com 
Twitter: @northcoders 
Facebook: Northcoders 


Northcoders is the coding bootcamp 
for the north, based in the heart of 
Manchester and built upon northern 
values of grit, determination and 
community spirit. No matter what 
your background, you can fast-track 
your career and become a web or 
software developer in 12 weeks at their 


e Full-time: 
Fasttrack your career in just 
12 weeks 


1. Get started with coding 

The best way to know if coding 
is for you is to just try it! We 
recommend the free, online 
JavaScript track of 
Codecademy to get you started 
with the basics. 


2.Do your research 

Make sure you read plenty 
of student reviews to make 
Sure youre applying 
somewhere reputable. Read 
their blog and Nave a look at 
their social channels. 


3. Throw yourself in 
Once you've decided it’s right 


full-time bootcamp, or fit their course 
around your life with their 24-week 
part-time bootcamp. Their internal 
career support team will help find you 
work as a developer, setting up 
interviews with your choices of 
Northcoders Hiring Partners across 
the north of England. 


¢ Part-time: 
Fit our Curriculum around 
your life in 24 weeks 


for you, set aside a few evenings 
each week to really start making 
progress! If coding is for you, 
this should be fun. 


4.Be prepared 

We'll be with you every step of 
the way when you apply. Make 
Sure you go through all the 
materials we recommend and 
ask for help if you're stuck. 


5. Get social 

With Northcoders, youre not 
just on a course, youre part of a 
community that will stay with 
you long after you graduate. 
Make the most of it! 


Becoming part of this vibrant, caring community was 
something | hadn't expected before the course, but 
now | couldn't be without it. To be a Northcoder is to 
be enlightened, inspired and supported. 


Joanne Imlay 


Primary school teacher to software developer at Careicon 
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Northcoders delivered their part of the bargain in spades. 
They provided tremendous assistance in turning me into 
the full product - a well-rounded, capable future tech 
employee - and they have the contacts to deliver the 
opportunities for such people. 

Joe Mulvey 

Maths teacher to software developer at Auto Trader 
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UDEMY 


www.udemy.com 


Twitter. @udemy 
Facebook: udemy 


The inspiration for Udemy beganina gran ie Fit EER SEROAY 
small village in Turkey, where founder | om De, a” | N HE 

Eren Bali grew up frustrated by the sepes fies” | Ae | 
limitations of being taught ina fae ! 
One-room school house. Realising 

the potential of learning on the internet, 
he set out to make quality education 
more accessible. Udemy is now a 
global marketplace for learning and 
teaching online. Students can master 
new skills by choosing from an 
extensive library of over 40,000 
courses including HTML, CSS, UX, 
JavaScript and web development. 


Get you ning lineup read 


Wa 


40,000+ courses: There is a 
course for every designer and dev | 
Self-paced learning: Learn how | 
to code at your own pace 


YARD Wl 
IRON YARD 


www .theironyard.com 


Twitter:@ThelronYard 
Facebook: ThelronYard 


The Iron Yard is one of the world’s 
largest and fastest-growing in-person c ae 

code schools. It offers full-time and Adler: - bg, 
parttime programs in back-end eee 
engineering, front-end engineering, > 
mobile engineering and design. The 
lron Yard exists to create real, lasting 
change for people, their companies 
and communities through technology 
education. The in-person, immersive 
format of The Iron Yard’s 12-week 
courses helps people learn to code 
and be prepared with the skills needed 
to start a career as junior-level 
software developers. 


wy ) 


12-week code school: Learn 
the latest skills from industry pros 
Free crash courses: One-night : 
courses, the perfect way to learn 


— = 


WEGOT CODERS 


‘2 WE GOT CODERS 


www.wegotcoders.com 
hello@wegotcoders.com 

We Got Coders is a consultancy that 
provides experts in agile web 
development, working with startups, 
agencies and government. Take one of 
their 12-week training courses that covers 
all that is required to become a web 
developer, with highly marketable 
full-stack web development skills. 


- Classroom-based training 
- Real-world work experience 
- Employment opportunities 


FUTURELEARN 


Future 
Learn 


www -.uturelearn.com 
feedback@futurelearn.com 
Choose from hundreds of free online 


_ courses, from Language & Culture to 


Business & Management; Science & 
Technology to Health & Psychology. 
Learn from the experts. Meet educators 
from top universities who'll share their 
experience through videos, articles, 


quizzes and discussions. 


_« Learn from experts 


- Free courses 


- All-device access 
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GYMNASIUM 


www.thegymnasium.com 
help@thegymnasium.com 
Gymnasium offers free online courses 
designed to teach creative 
professionals in-demand skills. 
Courses are all self-paced and taught by 
experienced practitioners with a passion 
for sharing practical lessons from the 
design trenches. 


« Gain real-world skills 


- Get expert instruction 
- Career opportunities 
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